:before および :after 擬似要素で z-index が機能しないのはなぜですか?

位置はあるが Z インデックスが機能しない

CSS で Z インデックスを使用するときに、Z インデックスが機能しないように見える場合動作している場合、最初のステップは、すべての要素に正しい位置が適用されていることを再確認することです。

この場合、問題は、:before および :after 疑似要素に適用されているtransformプロパティにあります。 #mainplanet 要素の。これらの要素に対して Z-index が期待どおりに機能するようにするには、transform プロパティを削除する必要があります。

変更された CSS コードは次のとおりです:

<pre class="snippet-code-css lang-css prettyprint-override">:root{

--size:200px;
}

背景 {

幅:100%;
高さ:100%;
位置:絶対;
トップ:0 ;
left:0;
背景: 線形グラデーション(-23.5deg, #000033, #00001a);
z-index:-2;
}

背景 # mainplanet {

width:var(--size);
高さ:var(--size);
background:#fff;
position:relative;
top:50 %;
left:50%;
transform:translate(-50%,-50%);
border-radius:50%;
}

background #mainplanet: before,#background #mainplanet:after{

content:"";
width:calc(var(--size) * 1.5);
height:calc(var(--size) / 2);
ボーダー:30px ソリッド #000;
位置:絶対;
トップ:10px;
左:-80px;
ボーダー半径:50%;
/ 変換プロパティ /
}

background #mainplanet:before{

border-top-color:transparent;
}

background #mainplanet:after{

z-index:-3;
}

<pre class="snippet-code-html lang-html prettyprint-override"><div id="background">