: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">

これらの変更により、Z -index プロパティは、:before および :after 擬似要素の位置に正しく影響するようになり、外側のリングがメインプラネットの円の後ろに表示されるようになります。

以上が:before および :after 擬似要素で z-index が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。