변환된 요소에서 z-index가 실패하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

변환으로 인해 z-index가 취소됨

제공된 코드에서 CSS 속성 z-index가 요소에 적용될 때 기능이 손실됩니다. 변환 속성을 적용한 후 테스트합니다. 이 문제는 변환 속성이 ​​요소에 대한 새로운 스택 컨텍스트를 설정하기 때문에 발생합니다.

스태킹 컨텍스트는 겹치는 요소가 표시되는 순서를 결정합니다. 일반적으로 동일한 스택 컨텍스트 내에서 z-index 값이 더 높은 요소는 z-index 값이 더 낮은 요소 위에 나타납니다. 그러나 z-index는 단일 스택 컨텍스트 내에만 적용됩니다.

귀하의 시나리오에서는 변환 속성이 ​​있는 .test 요소가 자체 스택 컨텍스트를 생성했습니다. 가상 요소인 .test:after는 .test의 하위 요소이기는 하지만 이 새로운 스태킹 컨텍스트 내에 남아 있습니다. 따라서 .test:after에 z-index: -1을 설정하면 .test의 스태킹 컨텍스트 내에만 배치되고 .test 뒤에 배치되지는 않습니다.

이 문제를 해결하려면 **새 인스턴스를 생성하면 됩니다. .test 및 .test:after** 모두에 대한 스택 컨텍스트를 컨테이너 요소에 래핑하여 배치합니다. 이 접근 방식을 사용하면 동일한 스택 컨텍스트를 공유하여 z-index`가 예상대로 작동할 수 있습니다.

수정된 코드는 다음과 같습니다.

.wrapper {
    -webkit-transform: rotate(10deg);
}
.test {
       width: 150px;
       height: 40px;
       margin: 30px;
       line-height: 40px;
       position: relative;
       background: white;
}
.test:after {
       width: 100px;
       height: 35px;
       content: "";
       position: absolute;
       top: 0;
       right: 2px;
       -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
       -webkit-transform: rotate(3deg); /* Safari and Chrome */
       transform: rotate(3deg);
       z-index: -1;
}

.wrapper에 대한 별도의 스택 컨텍스트 생성 , .test와 .test:after는 모두 동일한 컨텍스트를 공유합니다. 이를 통해 z-index는 원하는 회전을 유지하면서 .test 뒤에 .test:after를 올바르게 배치할 수 있습니다.

위 내용은 변환된 요소에서 z-index가 실패하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!