css - 绝对覆盖 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 浏览器中，“abs”元素被下一个“rela”元素覆盖，但它在其他浏览器(如 Firefox、chrome、IE8)中显示良好。我知道有人说我们可以向父“rela”元素添加更高的 z-index，但是对于上面的代码，在这种情况下无法解决问题，因为有两个以上的 rela 元素和所有他们有 abs 元素。

我现在不知道如何修复它。另外，如果有人可以提供有关此“错误”的官方解释，那就太好了。

Answer 1

给所有 div 类 rela 一个 z-index，第一个是最高的，直到底部的最低值(value)。

<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 .