IE7绝对元素出现在相对的元素后面

Question

我知道存在绝对元素出现在相对元素之上的错​​误。但是，我正在解决这个问题。

“bottom”元素的z-index为1，其位置为：relative assigned。 top元素具有绝对定位，z-index为99.

这在Firefox，基于Webkit的浏览器和IE8中运行良好。关于为什么会发生这种情况的任何想法？

Answer 1

  

在Internet Explorer中定位   元素生成新的堆叠   上下文，以z-index值开头   因此，z-index不起作用   正确。

见

Bug Report: Explorer z-index bug

和

Squish the Internet Explorer Z-Index Bug

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

我找到了一个有用的resource来解决这个问题：

长话短说，如果绝对放置的元素是空的，IE不喜欢将它放在其他元素的前面（例如，相对放置的文本）。您可以使用1x1透明gif来克服这个问题，例如。通过在绝对放置的元素上设置如下样式。

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