`transform`이 `z-index`를 취소하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

z-index 취소됨에 의해 변환: 이해 스태킹 컨텍스트

제공된 코드에서 ".test" 요소의 z-index가 취소됩니다. 변환 속성이 ​​적용될 때. 이 동작을 이해하려면 스택 컨텍스트의 개념을 자세히 조사해야 합니다.

자체 포함형 스택 컨텍스트:

변형은 ".test"에 대한 스택 컨텍스트를 생성합니다. 요소. 스태킹 컨텍스트는 z-index 값을 기준으로 요소의 순서를 결정합니다. 동일한 스택 컨텍스트 내의 요소는 z-인덱스에 따라 계층화되며 더 높은 값이 앞에 나타납니다.

상속된 스택 컨텍스트:

".test:after " 의사 요소에는 음수 Z 인덱스(-1)가 있습니다. 그러나 이 값은 ".test" 요소의 스택 컨텍스트 내 위치에만 영향을 미칩니다. z-index는 개별 스태킹 컨텍스트 내에서만 의미가 있기 때문에 ".test:after"를 ".test" 뒤에 배치하지 않습니다.

문제 해결:

To z-index가 예상대로 작동하도록 하려면 ".test"와 ".test:after"가 동일한 스태킹 컨텍스트를 공유하는지 확인하세요. 변환으로 ".test"를 회전하면 자체 스택 컨텍스트가 생성되지만 래퍼 요소를 사용하고 회전하면 ".test:after"가 동일한 컨텍스트를 상속할 수 있습니다.

래퍼가 포함된 업데이트된 코드:

".test"를 ".wrapper"로 묶고 이에 변환을 적용함으로써 ".test:after"에 대한 z-index 계층 구조를 보존합니다. ".wrapper"와 ".test"를 모두 회전하면서

<div class="wrapper">
    <div class="test">z-index is canceled.</div>
</div>

.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;
}

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