Question

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

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

1 个答案: