IE7 Absolute element appearing behind relative one

Question

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?

Answer 1

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

Answer 2

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});

});

Use the above if already using jQuery. Details here: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Answer 3

I've found a helpful resource to address this:

Long story short, if your absolutely placed element is empty, IE doesn't like to place it in front of other elements (eg. relatively placed text). You can use a 1x1 transparent gif to overcome this, eg. by setting a style like the following on your absolutely placed element.

 .mask {
   background: transparent url('/images/clear.gif') repeat 0 0;
 }