为什么绝对定位的伪元素在使用转换时会丢失其z-index?
小提琴:
http://jsfiddle.net/RyanWalters/jNgLL/
发生了什么?
当您单击li时,它会向左滑动而不更改任何z-index值.但是,在内容突然出现在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";
}
为什么:内容不落后于李?
最佳答案
我在w3.org上找到了这个,我认为它解释了它:http://www.w3.org/TR/css3-transforms/#effects
Any value other than ‘none’ for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
据我所知,你的li:after伪元素在li.active元素的堆叠上下文中,因此不能出现在它后面.