ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。