なぜz-indexが-1か。 z-index：1;の上に表示されます。

Question

この現象を説明する：1セット：

<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屈折率を有しています。

Answer 1

配置された要素のz-indexをauto（初期値）以外に設定すると、要素はその子孫ボックスの新しいスタッキングコンテキストを生成します。

これは、それらのz-indexが負場合でも、div:before擬似要素を含む、その下に表示され、その子孫のいずれかを防止します。もちろん、負の値を持つ子孫は、0または正の値を持つ子孫の下に表示され続けますが、その要素を含む要素は常に最背面に表示されます。

z-indexセットではなく、初期値を使用するため、その擬似要素のためのコンテキストを積み重ね生成しない、疑似要素が本当の下に表示することができます必要はありませんあなたのdiv残りの要素要素。それらが代わりに描画されるスタッキングコンテキストはbodyです。

---

_{スタッキングコンテキストルートのコンテンツは依然として負z-indexと子孫の背景上に表示されることに注意してください。これは意図的なものであり、詳細についてはthis answerで詳しく説明されています。}