@H_502_1@为什么绝对定位的伪元素在使用转换时会丢失其z-index?
@H_502_1@小提琴:
http://jsfiddle.net/RyanWalters/jNgLL/ @H_502_1@发生了什么?
当您单击li时,它会向左滑动而不更改任何z-index值.但是,在内容突然出现在li之上. @H_502_1@应该怎么办?
我希望它会隐藏在李的背后. @H_502_1@CSS(简化了一点,请参阅完整示例的小提琴): @H_502_1@
http://jsfiddle.net/RyanWalters/jNgLL/ @H_502_1@发生了什么?
当您单击li时,它会向左滑动而不更改任何z-index值.但是,在内容突然出现在li之上. @H_502_1@应该怎么办?
我希望它会隐藏在李的背后. @H_502_1@CSS(简化了一点,请参阅完整示例的小提琴): @H_502_1@
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";
}
@H_502_1@为什么:内容不落后于李?最佳答案
我在w3.org上找到了这个,我认为它解释了它:http://www.w3.org/TR/css3-transforms/#effects
@H_502_1@
@H_502_1@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.@H_502_1@据我所知,你的li:after伪元素在li.active元素的堆叠上下文中,因此不能出现在它后面.