CSS before/after - スタッキングの順序。なぜ両方が上にあるのですか？

Question

私は、CSSで前がコンテナの前にレンダリングされ、後がレンダリングされることを望みます。 Zインデックス= 0、コンテナ：前

ようなz屈折率= 1、及び後：Zインデックス= 2

が、順序が前である：Zインデックス= 1、コンテナ：Z-インデックス= 0、及び後：Zインデックス= 2

HTML：

<div id=theDiv>DIV</div> 

CSS：

#theDiv{ 
    position:relative; 
    width:100px; height:100px; 
    background-color:red; 
    margin:50px; 
} 
#theDiv:before{ 
    content:"Before"; 
    position:absolute; top:-30px; left:-30px; 
    width:90px; height:90px; 
    background-color:blue; 
} 
#theDiv:after{ 
    content:"After"; 
    position:absolute; top:30px; left:30px; 
    width:90px; height:90px; 
    background-color:yellow; 
} 

https://jsfiddle.net/shprung/892y1gzc/

私の通常の解決策は、-1のz-インデックスの前に強制的にハックのようにすることです。

The specsは間接的で重なり順を言及していない私が望んでいたものを提案する：

...その名前が示すとおり、：擬似要素は、コンテンツの場所を指定 後：前と前と要素のドキュメント ツリーのコンテンツの後に...

Zインデックスを強制するよりも、任意のよりよい解決策：-1？

他の同様の質問は、新しいスタッキングコンテンツをセットアップすることが必要であると仮定したいと思いますが、そうではありません。たとえば、以下のコードのような各Zインデックスを与えても、正しく動作しません。 z-index：前の-1はいくつかのユニークなケースなので、私は困惑しています。

#theDiv{ 
    z-index:50; 
    position:relative; 
    width:100px; height:100px; 
    background-color:red; 
    margin:50px; 
} 
#theDiv:before{ 
    z-index:1; 
    content:"Before"; 
    position:absolute; top:-30px; left:-30px; 
    width:90px; height:90px; 
    background-color:blue; 
} 
#theDiv:after{ 
    z-index:100; 
    content:"After"; 
    position:absolute; top:30px; left:30px; 
    width:90px; height:90px; 
    background-color:yellow; 
} 

Answer 1

::beforeと::afterない兄弟として、子供選択された要素のとして擬似要素を作成します。だから、#theDivに::beforeと::afterを追加して作成するようになります。

<div id="theDiv"> 
    <span id="theDiv_before"></span> 
    DIV 
    <span id="theDiv_after"></span> 
</div> 

子要素は親要素の上に積み重ね、および擬似要素はそのように表示される理由です。

詳細については、the stacking context in CSSを参照してください。

解決策は、divのコンテナに擬似要素を作成するか、またはz-index: -1をそのまま使用することです。