CSS：绝对定位的伪元素失去了z-index？

Question

为什么绝对定位的伪元素在使用transition时会丢失其z-index ？

小提琴： http ： //jsfiddle.net/RyanWalters/jNgLL/

发生了什么？ 当您单击li ，它会向左滑动而不更改任何z-index值。 但是， :after内容突然出现在li之上。

应该怎么办？ 我希望它会隐藏在li背后。

CSS（简化了一点，请参阅完整示例的小提琴）：

li {
    position: relative;
    transition: transform 0.2s;
}

li.active {
    transform: translateX(-100px);
}

li:after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    content: "Yada yada";
}

为什么:after内容不落后于li ？

Answer 1

我在w3.org上找到了这个，我认为这解释了它： http ： //www.w3.org/TR/css3-transforms/#effects

变换的“none”以外的任何值都会导致堆叠上下文和包含块的创建。 该对象充当固定定位后代的包含块。

据我所知，你的li:after伪元素在li.active元素的堆叠上下文中，因此不能出现在它后面。

Answer 2

@ BernzSed的回答是正确的。 不过这是一个解决方案：

使用position: relative的<div> （或任何其他元素）将内容包装在<li> ，然后psuedo元素上的z-index: -1将强制它位于子元素后面。

这是基本代码：

HTML：

<ul>
  <li><div>This is the first item</div></li>
</ul>

CSS：

li,
li div {
  position: relative;
}

li:after {
  position: absolute;
  z-index: -1;
}

示例： http ： //jsfiddle.net/shshaw/jNgLL/3/

另外有趣的是：如果你使用:before psuedo元素:before ，你不需要z-index: -1因为它已经位于堆叠顺序中的position: relative子元素之下。