z-index 不适用于绝对元素答案

【问题标题】：z-index doesn't work with absolute elementsz-index 不适用于绝对元素
【发布时间】：2014-04-06 19:44:32
【问题描述】：

当页面中有一些absolute DIV 和一个fixed DIV 作为z-index 大于absolute DIV 的absolute DIV 之一的孩子时，fixed DIV 落后absolute DIV！

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

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

谢谢

【问题讨论】：

您的标记有缺陷。 fixed（相对于窗口）inside 一个元素是absolute（相对于文档），你怎么能拥有它？如果你想把它放在前面，把它移到父容器的外面。
@cale_b: 我要临时最大化另一个 div 中的一个 div 以将整个页面填充为全屏视图
再说一次，这不是你应该怎么做。
然后使用绝对定位。未修复。
@cale_b: 绝对位置导致填充父 DIV 但我不想填充父；我想填满页面（即视口）！

标签： html css z-index absolute

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

【讨论】：

谢谢；是的，但它会导致另一个问题，即 DIV 将落后于页面中的其他元素！
像这样使用绝对定位和固定定位最终会给您带来很多难以管理的 CSS 问题。根据您的目标，您最好使用相对或静态定位（静态是默认位置值）并在展开 .data 时为大全屏覆盖保留固定定位。

【解决方案2】：

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

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

【讨论】：

+1 表示概念，但您有一些错误。 Fixed 使 div 固定到 window，而不是网站。
谢谢，但我不想填写父母；我想填满页面（即视口）！