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

为什么绝对定位的伪元素在使用transition时会丢失其z-index？CSS：绝对定位的伪元素失去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"; 
}

为什么不留在li背后的:after内容？

来源

2013-11-14 Ryan

可能是一个错误。 – bjb568

我在Chrome中看不到这个 – DaniP

[适用于Firefox（和非webkit浏览器）的jsfiddle]（http://jsfiddle.net/jNgLL/1/） – Oriol

我发现这对w3.org，我想解释它：http://www.w3.org/TR/css3-transforms/#effects

任何值比在创建两个堆叠环境和含块的变换结果“无”等。该对象充当固定位置后代的包含块。

据我了解，你li:after伪元素是li.active元素的堆叠上下文中，因此也不会出现后面。

来源

2013-11-14 21:30:53 BernzSed

我有一个更简单的情况：一个具有绝对内容动态的静态容器。我解决了注意将转换仅应用于内容而不是内容+容器的问题。感谢您的明确解释！ – McGiogen

@ BernzSed的回答是正确的。这里有一个解决方案，但：

裹使用<div>（或任何其他元素）的<li>里面的内容与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 psuedo元素，则不需要z-index: -1，因为它已经在堆叠顺序中的position: relative子元素下。

来源

2013-11-14 21:43:40 shshaw

我希望我能接受2个答案。 BernzSed在技术上是正确的，但您的解决方案正是我所期待的。谢谢！ – Ryan

不用担心。 BernzSed回答了这个问题，我只是因解决问题而感兴趣;） – shshaw

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

回答

相关问题