css - 具有生成内容/伪元素的转换元素不遵守 z-index

Question

基本上，如果您查看此内容，您会发现我有一个元素，该元素应用了一个已生成内容的转换。该: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;
    }
}