要素のz-インデックスへの影響：before /：after擬似要素

Question

z-indexとcss擬似要素に関しては私があまり理解していない動作です:: before/:: after 。

なお、このjsfiddleに示されている：http://jsfiddle.net/jgoyon/T6QCf/

Iが位置決めボックスを作成し、（同様に配置）擬似要素の後::有するコンテンツを追加しました。

• 私は擬似要素の後::にZインデックスを設定し、すべてがうまく機能していると私は、zインデックス

#no-z-index { 
     background:lightblue; 
     width:100px; 
     height:100px; 
     position:relative; 
    } 
    #no-z-index:after { 
     content: 'z-index -1'; 
     width:50px; 
     height:50px; 
     background:yellow; 
     position:absolute; 
     z-index:-1; /* z-index in question */ 
     top:70px; 
     left:70px; 
    } 

で遊んでそれを上に置くか、親の下にできた場合
• 同じことをして、親のz-indexを設定すると、それはもはや機能しません。

#z-index { 
     background:lightblue; 
     left:200px; 
     width:100px; 
     height:100px; 
     position:relative; 
     z-index:0; /* parent z-index */ 
    } 
    #z-index:after { 
     content: 'z-index -1'; 
     width:50px; 
     height:50px; 
     background:yellow; 
     position:absolute; 
     z-index:-1; /* z-index in question */ 
     top:70px; 
     left:70px; 
    } 

それは予想される動作ですか？

Answer 1

これは予期した動作であり、specに記載されています。

生成要素にz-index（デフォルトはauto）を指定しないと、生成要素と擬似要素が同じスタッキングコンテキストに表示されます。これにより、そのz-indexが低い場合、擬似要素が要素の下に現れるようになります。

あなたが発生素子にz-indexを指定した場合は、その要素が今までしても、その下に表示されてから擬似要素を防止し、擬似要素の新しいスタッキングコンテキストを（その子孫のと実際にはすべて）を作成しますあなたはそれに負の値を与えますz-index。