Abs. Pos. Element Appearing behind Releative Pos. Element in IE7

[yarnosh]

I'm having a very frustrating problem with an absolutely positioned menu element displaying underneath a relatively positioned element in IE7. It works fine in Firefox and Safari, but not IE7. May also not work IE6 and IE8, I didn't test.

I'm afraid my test case too complex to post here. Is there any good advice you can give about dealing with IE7 and absolute positioning? Why would a relatively positioned div display ABOVE an absolutely positioned UL element with a z-index of 100? I didnt' think relatively positioned elements took a z-Index, but I tried explicitly setting it to 0 anyway. Still no change.

Also, the relatively positioned div also happens to be floated left if that makes any difference.

[swa66]

Welcome to WebmasterWorld!

Legacy IE versions do create extra stacking contexts they should not create from a standards perspective. That's most likely the reason your z-index doesn't work. Not triggering the extra stacking context can be a solution (but it's sometimes terribly hard to do so).

I've had success with setting the z-index not to 0 but to -1 (yes, as illogical as it sounds) [webmasterworld.com...]

Some more info on how stacking contexts and z-index interact:
[w3.org...]

Remember that it goes wrong in legacy IE versions due to it creating additional unwarranted stacking contexts whenever e.g. a relative positioned element has hasLayout. With height and width triggering hasLayout, it's often hard to avoid to trigger it.

[yarnosh]

Hmm, using -1 fixed it. I am not sure why, but OK. Thanks!