`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>배경 #mainplanet {</h1>
<p>너비:var(--size);<br> 높이:var(--size);<br> 배경:#fff;<br> 위치:상대적;<br> 위쪽:calc(50% - var(--size)/2);<br> 왼쪽:calc(50% - var(--size)/2);<br> border-radius:50%;<br> }</p>
<h1>배경 #mainplanet:before,#ground #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> 변환:rotateX(66deg)rotateY(170deg);<br>}</p>
<h1>배경 #mainplanet:before{</h1>
<p>border-top-color:transparent ;<br>}</p>
<h1>배경 #mainplanet:after{</h1>
<p>z-index:-3;<br>}

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

이 수정을 통해 이제 두 번째 링이 원 뒤에 올바르게 배치되어 Z-인덱스를 사용하여 개체 레이어링을 조작하는 효과를 보여줍니다.

위 내용은 `transform`을 사용할 때 `z-index`가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!