html - z-index 不适用于绝对元素

Question

当我们在页面中有一些 absolute DIV 和一个 fixed DIV 作为其中一个具有更大 z-index 比那些 absolute DIV，fixed DIV 落后于 absolute DIV!

像这样:http://jsfiddle.net/3qRaR/1/

HTML:

<div class='l1'>
    <div class='data'></div>
</div>
<div class='l1'>
    <div class='data'></div>
</div>
<div class='l1'>
    <div class='data'></div>
</div>
<div class='l1'>
    <div class='data'></div>
</div>

CSS:

.l1{
    display: block;
    width: 100px;
    height: 100px;
    background-color: yellow;
    z-index:1001;
    margin: 5px;
    position: absolute;
}
.l1:nth-child(1){
    left: 5px;
    top: 5px;
}
.l1:nth-child(2){
    left: 110px;
    top: 5px;
}
.l1:nth-child(3){
    left: 220px;
    top: 5px;
}
.l1:nth-child(4){
    left: 330px;
    top: 5px;
}
.data{
    display:none;
    position: fixed;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    z-index:2000;
    background: black;
}
.l1:first-child .data{
    display: block;
}

为什么？
我怎样才能走到他们前面？

谢谢

Answer 1

从 .li 规则中删除 z-index，黑色 .data div 将位于黄色 .li div 之上。我假设这就是您想要做的？

.l1{
    display: block;
    width: 100px;
    height: 100px;
    background-color: yellow;
    // Removed the z-index from here
    margin: 5px;
    position: absolute;
}