我试图用:后伪元素CSS选择器样式一个元素
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
似乎::后面的元素不能比元素本身更低。
有没有办法让伪元素低于元素本身?
当前回答
将:before或:after伪元素的z-index设置为-1，并赋予它一个符合z-index属性的位置(绝对、相对或固定)。这是因为伪元素的z-index相对于它的父元素，而不是<html>，这是其他元素的默认值。这是有意义的，因为它们是<html>的子元素。
我遇到的问题(导致我提出这个问题和上面接受的答案)是，我试图使用一个:after伪元素来获得一个z-index为15的元素的背景，即使设置为z-index为14，它仍然在其父元素的顶部呈现。这是因为，在那个堆叠环境中，它的父结点的z-index是0。
希望这能帮你弄清楚到底发生了什么。
其他回答
试试吧
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
我知道这个问题很古老，也有一个公认的答案，但我找到了一个更好的解决方案。我把它贴在这里，这样我就不会产生重复的问题，而且解决方案仍然可供其他人使用。
切换元素的顺序。对于应该在下面的内容，在伪元素之前使用:，并调整页边距进行补偿。边缘清理可能会很混乱，但所需的z-index将被保留。
我已经成功地用IE8和FF3.6测试了这个功能。
将:before或:after伪元素的z-index设置为-1，并赋予它一个符合z-index属性的位置(绝对、相对或固定)。这是因为伪元素的z-index相对于它的父元素，而不是<html>，这是其他元素的默认值。这是有意义的，因为它们是<html>的子元素。
我遇到的问题(导致我提出这个问题和上面接受的答案)是，我试图使用一个:after伪元素来获得一个z-index为15的元素的背景，即使设置为z-index为14，它仍然在其父元素的顶部呈现。这是因为，在那个堆叠环境中，它的父结点的z-index是0。
希望这能帮你弄清楚到底发生了什么。
说到规范(http://www.w3.org/TR/CSS2/zindex.html)，由于a.someSelector被定位，它创建了一个新的堆叠上下文，它的子上下文无法跳出。保留a.someSelector不定位，然后子a.someSelector:after可以定位在与a.someSelector相同的上下文中。
我不知道是否有人会有同样的问题。所选的答案部分正确。
你需要的是:
parent{
z-index: 1;
}
child{
position:relative;
backgr
