Z-Index가 변환을 사용하는 의사 요소에서 작동하지 않는 이유는 무엇입니까?

Z-색인이 외부 링에 영향을 주지 않음

CSS를 사용하여 원 뒤로 외부 링을 이동하려고 하면 다음과 같은 문제가 발생할 수 있습니다. z-index 속성은 효과가 없는 것 같습니다. 이 경우 문제는 의사 요소에 적용되는 변환 속성에 있습니다.

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

이를 해결하려면 변환 속성을 제거하고 이를 조정과 같은 대체 위치 지정 방법으로 교체해야 합니다. 위쪽 및 왼쪽 좌표를 사용하거나 계산된 값으로 절대 위치 지정을 사용합니다.

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

이러한 변경을 수행하면 Z-색인 속성에 대한 제어권을 다시 얻고 원 뒤의 의사 요소를 효과적으로 이동할 수 있습니다. 의도대로.

위 내용은 Z-Index가 변환을 사용하는 의사 요소에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!