Question

当我们在页面中有一些absolute个DIV，并且fixed个DIV作为absolute个DIV之一的孩子时，z-index个DIV比那些absolute更大fixed DIV，absolute 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> <div class='l1'> <div class='data'></div> </div> DIV！

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

HTML：

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

CSS：

{{1}}

为什么？
如何让它走到前面？

由于

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;
}

Answer 2

fixed使得div fixed能够记录，而不是元素，即使它是absolute。制作位置absolute的.data div，而不是fixed。

http://jsfiddle.net/3qRaR/7/

.data{
    display:none;
    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    z-index:2000;
    background: black;
}

修改如果您希望fixed div覆盖整个文档，那么只需将fixed div的容器设置为高z-index，而不是其余部分：

http://jsfiddle.net/3qRaR/11/

.l1:nth-child(1){ z-index: 10000; left: 5px; top: 5px; }

z-index不适用于绝对元素

2 个答案: