Question

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

小提琴： 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的回答是正确的。不过，这是一个解决方案：

使用带有<li>的{{1}}（或任何其他元素）将内容包含在<div>内，然后psuedo元素上的position: relative将强制它落后儿童元素。

以下是基本代码：

<强> HTML：

z-index: -1

<强> CSS：

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

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

另外有趣的是：如果你使用li, li div { position: relative; } li:after { position: absolute; z-index: -1; } psuedo元素，则不需要:before，因为它已经属于堆叠顺序中的z-index: -1子元素。< / p>

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

2 个答案: