Z インデックスが変換を伴う疑似要素で機能しないのはなぜですか?

Z インデックスは外側のリングに影響を与えません

CSS を使用して外側のリングを円の後ろに移動しようとすると、次の問題が発生する可能性があります。 z-index プロパティは効果がないようです。この場合、疑似要素に適用されているtransformプロパティに問題があります。

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  transform: rotateX(66deg) rotateY(170deg);
}</code>

これに対処するには、transformプロパティを削除し、調整などの代替の位置決め方法に置き換える必要があります。上と左の座標、または計算値による絶対位置を使用します。

<code class="css">#background #mainplanet:before,#background #mainplanet:after {
  ...
  top: calc(10px - var(--size) / 4);
  left: calc(-80px - var(--size) / 4);
}</code>

これらの変更を行うことで、z-index プロパティの制御を取り戻し、擬似要素を円の後ろに効果的に移動できるようになります。意図したとおりです。

以上がZ インデックスが変換を伴う疑似要素で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。