「transform」を使用すると「z-index」が機能しないのはなぜですか?

:root{ <br> --size:200px;<br>}</p>
<h1>背景 {</h1>
<p>幅:100%;<br> 高さ:100%;<br> 位置:絶対;<br>上:0;<br> 左:0;<br> 背景: 線形グラデーション(-23.5deg, #000033, #00001a);<br> z-index:-2;<br>}</p>
<h1>background #mainplanet {</h1>
<p>幅:var(--size);<br>高さ:var(--size);<br>背景:#fff;<br>位置:相対;<br>上:calc(50% - var(--size)/2);<br> 左:calc(50% - var(--size)/2);<br> 境界半径:50%;<br> }</p>
<h1>background #mainplanet:before,#background #mainplanet:after{</h1>
<p>content:"";<br> width:calc(var(--size) * 1.5);<br> 高さ:calc(var(--size) / 2);<br> ボーダー:30px ソリッド #000;<br> 位置:絶対;<br> 上:10px;<br> 左:-80px;<br> border-radius:50%;<br>transform:rotateX(66deg)rotateY(170deg);<br>}</p>
<h1>background #mainplanet:before{</h1>
<p>border-top-color:transparent ;<br>}</p>
<h1>background #mainplanet:after{</h1>
<p>z-index:-3;<br>}

<div id="background"><br> <div id="mainplanet"><br> </div><br></div&gt ;

この変更により、2 番目のリングが円の後ろに正しく配置されるようになり、z-index を使用してオブジェクトの階層化を操作することの有効性が示されました。

以上が「transform」を使用すると「z-index」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。