为什么 z-index: -1;出现在 z-index: 1;?答案

【问题标题】：Why does z-index: -1; appear above z-index: 1;?为什么 z-index: -1;出现在 z-index: 1;?
【发布时间】：2012-07-27 13:30:12
【问题描述】：

解释这种行为：

<div style="z-index: 1"></div>
<div></div>
<div></div>
<div></div>

div {
   position: relative;
   background: red;
   width: 100px;
   height: 100px;    
}

div:before {
    position: absolute;
    background: blue;
    width: 100px;
    height: 100px;  
    z-index: -1;
    content: "";
    left: -5px;
    top: -5px;
}

http://jsfiddle.net/2VexH/2/

唯一的区别是第一个 div 有 z-index: 1 集。

【问题讨论】：

标签： css z-index

【解决方案1】：

将定位元素的z-index 设置为auto（初始值）以外的任何值会导致该元素为其后代框生成新的堆叠上下文。

这可以防止它的任何后代出现在它下面，包括 div:before 伪元素，即使它们的 z-index 是负数。当然，任何带有负数z-index 的后代将继续出现在包含元素内的带有零或正数z-index 的后代下面，但包含元素将始终位于最后面。¹

其余没有设置z-index 的div 元素将使用初始值，因此不会为其伪元素生成堆叠上下文，从而允许伪元素出现在真实元素的下方元素。绘制它们的堆栈上下文是 body 的堆栈上下文。

¹_{请注意，堆叠上下文根的 content 仍将出现在带有负 @ 的后代的 background 之上987654332@。这是有意为之，在this answer 中有更详细的介绍，并附有规范的相关链接。}

【讨论】：