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

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

Answer 1

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

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

没有一个z-index集将使用初始值来代替，因此不会产生堆积其伪元素的上下文，使伪元素出现低于实际的div其余元素元素。它们所绘制的堆叠上下文是body。

---

_{注意，堆叠上下文根的内容仍然会出现一个后代的背景具有负z-index上方。这是有意的，并在this answer中有更详细的介绍，并附有相关规范链接。}