생성 된 내용/의사 요소가있는 변형 된 요소는 Z- 인덱스를 준수하지 않습니다.

Question

기본적으로 this을 보면 내용이 생성 된 변환이 적용된 요소가 있음을 알 수 있습니다. :after 요소는 div 뒤에 표시되어야하지만 그렇지 않습니다. !important- 양은 효과가 없습니다.

의사 요소를 div 뒤에 표시하려면 어떻게해야합니까?

IE 8 이하는 상관하지 않습니다.

Answer 1

이것은 이상하고 종종 원치 않는 동작이지만 예상됩니다. 본질적으로 요소를 변형하면 새로운 스택 컨텍스트가 생성됩니다.이 컨텍스트는 의사 요소의 경우 더 이상 요소의 뒤에 있지 않을 수 있습니다.

자세한 내용은이 문서를 참조하십시오 : https://daneden.me/2012/04/22/css-transforms-and-z-index/

는 현재이 문제를 해결하는 유일한 방법은 (즉 래퍼 요소를 생성하고 변환) 부모 요소에 새로운 스택 문맥을 생성하는 것입니다. 다음은 예입니다 http://jsfiddle.net/joshnh/GzWnb/

HTML :

<div class="wrapper"> 
    <div id="box"></div> 
</div> 

CSS :

.wrapper { 
    -moz-transform: rotate(10deg); 
    -webkit-transform: rotate(10deg); 
    transform: rotate(10deg); 
} 
#box{ 
    width: 200px; 
    height: 200px; 
    left: 100px; 
    top: 100px; 

    background:blue; 
    position: absolute; 
    &:after{ 
     content: ""; 
     width: 100px; 
     background: orange; 
     height: 100px; 
     position: absolute; 
     left: 120px; 
     top: 120px; 
     z-index: -2!important; 
    } 
}