爲什麼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中有更詳細的介紹，並附有相關規範鏈接。}