변환을 사용할 때 Z-색인이 작동하지 않는 이유는 무엇입니까?

Z-Index가 작동하지 않음

문제:

z-를 사용하여 원 뒤로 링을 이동하려고 합니다. index에 음수 값을 지정했음에도 불구하고 링은 앞에 남아 있습니다.

설명:

이 특별한 경우에는 다음에 변환을 적용했습니다. 링의 의사 요소. 변환이 적용되면 z-index 속성이 더 이상 효과가 없습니다.

해결책:

이 문제를 해결하려면 변환 속성을 제거하고 교체해야 합니다. 원 뒤에 링을 배치하는 대체 방법을 사용합니다.

코드 조각:

변형 속성을 제거하고 위쪽 및 왼쪽을 사용하여 링의 절대 위치를 지정합니다. 속성:

<code class="css">#background #mainplanet:after {
  z-index: -3;
  top: calc(50% - var(--size)/2) !important;
  left: calc(50% - (var(--size) * 1.5)/2) !important;
}</code>

이렇게 하면 링이 원 뒤에 배치되고 Z-인덱스가 적용됩니다.

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