`transform`을 사용할 때 `z-index`가 작동하지 않는 이유는 무엇입니까?
- DDD원래의
- 2024-11-01 15:30:04684검색
z-index가 작동하지 않음: 위치 지정 문제 이해 및 해결
위치가 지정된 여러 요소로 작업하는 경우 Z-인덱스를 사용하면 예상한 레이어링이 발생하지 않는 상황이 발생할 수 있습니다. 이러한 문제 중 하나는 z-인덱스를 사용하여 위치가 지정된 다른 요소 뒤에 요소를 배치하려고 할 때 발생합니다.
제공된 코드에서는 두 개의 링이 생성됩니다. 첫 번째 링은 원 위에 위치합니다. 상단이 없고 두 번째는 원 뒤에 있습니다. 후자는 z-index 값이 -3임에도 불구하고 적용된 변환 속성으로 인해 앞에 남아 있습니다.
해결책은 변환 속성을 제거하고 대안으로 교체하십시오. 수정된 코드는 다음과 같습니다.
: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> ;
이 수정을 통해 이제 두 번째 링이 원 뒤에 올바르게 배치되어 Z-인덱스를 사용하여 개체 레이어링을 조작하는 효과를 보여줍니다.
위 내용은 `transform`을 사용할 때 `z-index`가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.