IE7 z-index not working correctly

I've run into the infamous ie7 z-index bug but none of the solutions I have found on the web have been successful in fixing my problem :/

See here: http://jsfiddle.net/bwLJM/

开发者_开发技巧The green box appears above in all browsers including ie9 and ie8 but not ie7 (i don't care about ie6)

If I remove the position:relative; from the parent element though it will fix the issue but I need that to stay because I am going to be positioning some elements inside a parent of those boxes using absolute!

Can anyone help?

Thanks

Could you put the overlay box inside relative positioned element? Like in this example?

It works in my IE7.