views:

344

answers:

2

I know there is the bug where absolute elements appear above relative ones. However I am getting the reverse of this issue.

The z-index on the "bottom" element is 1 and has a position:relative assigned. The top element has absolute positioning and a z-index of 99.

This works fine in Firefox, Webkit based browsers and IE8. Any ideas about why this could be happening?

+2  A: 

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.

See

Bug Report: Explorer z-index bug

and

Squish the Internet Explorer Z-Index Bug

rahul
Thanks. The links helped.
tgandrews
A: 

Ok, but that fix only seems to work when both are absolutely positioned. What about when you have an absolute and a relative element?

Eric
It works in both cases if you find the correct element to put the increased z-index of. Also use a reasonable z-index e.g. 300
tgandrews