带有生成的内容/伪元素的转换后的元素不符合z-index

Question

基本上，如果你看看this，你会看到我有一个元素，其中应用了一个已生成内容的变换。 :after元素应该出现在div的后面，但它不是。没有任何数量的!important -ing正在起作用。

我怎样才能让伪元素出现在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; 
    } 
}