转换后带有生成内容/伪元素的元素不遵循 z-index。

Question

基本上，如果您查看这个链接，您会发现我有一个带有应用变换的元素产生的内容。:after元素应该出现在div后面，但它没有。无论使用多少次!important都没有任何效果。

如何使伪元素出现在div后面？

我不关心IE 8或更低版本。

- Jason

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;
    }
}

- joshnh

---

是的，我在研究时看到了那篇文章，但我希望它已经得到解决。我知道这是“预期”的，但这几乎不是预期的。我理解它应该创建一个“新”的堆叠上下文，但该堆叠上下文应完全基于现有的堆叠上下文。或者，如果不是这样，用户应该有一种方法来修改所述新的堆叠上下文。 - Jason

是的，我同意你的看法。我并不完全理解为什么要做出那个决定，希望有一种绕过它的方法。请记住，在基本元素上设置z-index（就像您目前所做的那样）将会产生相同的效果，设置小于1的不透明度也是如此。 - joshnh

希望我能再次点赞。我也遇到了同样的问题并进行了谷歌搜索，最终来到了这里 :) 也许我应该吸取教训。 - Jason

文章链接已损坏，可在网络档案馆中找到。 - fregante