6

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

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

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

应该发生什么？ 我希望它会隐藏在li.

CSS（简化了一点，完整的例子见 fiddle）：

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？

4

2 回答 2

5

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

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

据我了解，您的li:after伪元素位于元素的堆叠上下文中li.active，因此不能出现在其后面。

于 2013-11-14T21:30:53.443 回答
5

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

<li>使用 a <div>（或任何其他元素）用包裹内容position: relative，然后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伪元素，则不需要，z-index: -1因为它已经position: relative在堆叠顺序中属于子元素。

于 2013-11-14T21:43:40.817 回答