IE7 绝对元素出现在相对元素后面答案

【问题标题】：IE7 Absolute element appearing behind relative oneIE7 绝对元素出现在相对元素后面
【发布时间】：2010-12-04 05:50:42
【问题描述】：

我知道存在绝对元素出现在相对元素之上的错误。但是我得到了这个问题的反面。

“底部”元素的 z-index 为 1，并分配了一个 position:relative。顶部元素具有绝对定位，z-index 为 99。

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

【问题讨论】：

【解决方案1】：

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

见

和

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

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

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

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

【讨论】：