Question

解释这种行为：

<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 set。

Answer 1

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

这可以防止其后代出现在其下方，包括div:before伪元素，即使他们的z-index为否定。当然，任何具有负z-index的后代将继续出现在包含元素中具有零或正z-index的后代下方，但包含元素的后代将始终位于最后面。¹

其他不具有div集的z-index元素将使用初始值，因此不会为其伪元素生成堆叠上下文，从而允许伪元素出现在真实元素下面。相反，它们的堆叠上下文是body。

¹ _{请注意，堆叠上下文根的内容仍将显示在具有负数的后代的背景上方{ {1}}。这是故意的，在this answer中有更详细的介绍，并附有相关的规范链接。}

为什么z-index：-1;出现在z-index之上：1;？

1 个答案: