IE7 Absolute Element Appearing Relative

Question

I know that there is a mistake in which absolute elements appear above relative ones. However, I will solve the problem.

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

This works great in Firefox, Webkit, and IE8 browsers. Any ideas on why this might be happening?

Answer 1

In Internet Explorer, elements create a new context structure, starting with the value of z-index 0. Therefore, the z-index does not work correctly.

Cm

Error Report: z-index Explorer Error

and

Discard Z-Index Internet Explorer Error

Answer 2

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

});

, jQuery. : http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Answer 3

:

, , IE (, ). gif 1x1, , . , .

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