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

Question

基本上,如果你看一下这个,你会看到我有一个元素,其中应用了一个生成内容的变换.该: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;
    }
}