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

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>使用<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/

另外有趣的是:如果使用:beforepsuedo元素,则不需要z-index: -1它,因为它已经落在position: relative堆叠顺序中的子元素下.