具有生成内容/伪元素的转换元素不遵守 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;
    }
}