绝对叠加div元素不包括相对定位的元素

Question

在IE7浏览器中，我只遇到一个关于位置的问题。 我做了一个演示页来测试相对和绝对的位置条件。 以下是相关代码：

[CSS]

.rela{
    width:200px;
    height:100px;
    background:#EEE;
    margin-bottom:10px;
    position:relative;
}
.abs{
    width:50px;
    height:50px;
    position:absolute;
    background:#333;
    left:20px;
    top:80px;
    z-index:10;
}

[HTML]

<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>
<div class="rela"><div class="abs"></div></div>

现在，问题是，在IE7浏览器中，＆＃34; abs＆＃34;元素被下一个＆＃34; rela＆＃34;元素，但它在Firefox，Chrome，IE8等其他浏览器中表现良好。 我知道有人说我们可以为父母增加一个更高的z指数＆＃34; rela＆＃34;元素，但对于上面的代码，问题不能在这种情况下修复，因为有两个以上的相关元素，所有这些元素都有abs元素。

我现在不知道如何修复它。此外，如果有人可以提供关于这个＆＃34; bug＆＃34;的官方解释，那就太好了。

Answer 1

为所有div提供rela个z-index，第一个为最高，最低为最低值。

<div class="rela" style="z-index: 40;"><div class="abs"></div></div>
<div class="rela" style="z-index: 30;"><div class="abs"></div></div>
<div class="rela" style="z-index: 20;"><div class="abs"></div></div>
<div class="rela" style="z-index: 10;"><div class="abs"></div></div>

另见example。

Answer 2

同样的问题被问到here。

不要问我为什么，但最后的答案似乎解决了问题（虽然你需要jQuery等）：

http://jsfiddle.net/Xmznn/1/

Answer 3

查看更改，它在IE 7中工作

 .rela{
    width:200px;
    height:100px;
    background:#EEE;
    margin-bottom:10px;
}

.abs{
    width:50px;
    height:50px;
    background:#333;
    margin:80px 0 0 20px;
    z-index:0;
    position:absolute;
}

Answer 4

尝试添加

z-index : 0;

到div.rela

Answer 5

知道问题并在那里做好充分记录。 检查 - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

可能会帮助你。

Answer 6

有一个有用的resource来解决这个问题。

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

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

我发现这有帮助。它非常棒，因为只需要很少的额外样式，您无需明确管理z-indices。