我试图用:后伪元素CSS选择器样式一个元素
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
似乎::后面的元素不能比元素本身更低。
有没有办法让伪元素低于元素本身?
当前回答
伪元素被视为其关联元素的后代。要将伪元素放置在其父元素的下面，必须创建一个新的堆叠上下文来更改默认的堆叠顺序。 定位伪元素(absolute)并分配除" auto "之外的z-index值创建新的堆叠上下文。
#element { position: relative; /* optional */ width: 100px; height: 100px; background-color: blue; } #element::after { content: ""; width: 150px; height: 150px; background-color: red; /* create a new stacking context */ position: absolute; z-index: -1; /* to be below the parent element */ } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Position a pseudo-element below its parent</title> </head> <body> <div id="element"> </div> </body> </html>
其他回答
我知道这个问题很古老，也有一个公认的答案，但我找到了一个更好的解决方案。我把它贴在这里，这样我就不会产生重复的问题，而且解决方案仍然可供其他人使用。
切换元素的顺序。对于应该在下面的内容，在伪元素之前使用:，并调整页边距进行补偿。边缘清理可能会很混乱，但所需的z-index将被保留。
我已经成功地用IE8和FF3.6测试了这个功能。
我知道这是一个旧的帖子，但我觉得有必要张贴适当的答案。这个问题的实际答案是，您需要在带有伪元素的元素的父元素上创建一个新的堆叠上下文(并且您实际上必须给它一个z-index，而不仅仅是一个位置)。
是这样的:
#parent {
position: relative;
z-index: 1;
}
#pseudo-parent {
position: absolute;
/* no z-index allowed */
}
#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;
}
#父{位置:相对;z - index: 1;｝ #伪父{位置:绝对;} /*不需要z-index */ #伪父:后{位置:绝对;z - index: 1;｝ /*示例样式来说明*/ #伪父{背景:#d1d1d1;｝ #伪parent:after {margin-left: -3px;内容:M} < div id = "父" > < div id = " pseudo-parent " > , < / div > < / div >
说到规范(http://www.w3.org/TR/CSS2/zindex.html)，由于a.someSelector被定位，它创建了一个新的堆叠上下文，它的子上下文无法跳出。保留a.someSelector不定位，然后子a.someSelector:after可以定位在与a.someSelector相同的上下文中。
伪元素被视为其关联元素的后代。要将伪元素放置在其父元素的下面，必须创建一个新的堆叠上下文来更改默认的堆叠顺序。 定位伪元素(absolute)并分配除" auto "之外的z-index值创建新的堆叠上下文。
#element { position: relative; /* optional */ width: 100px; height: 100px; background-color: blue; } #element::after { content: ""; width: 150px; height: 150px; background-color: red; /* create a new stacking context */ position: absolute; z-index: -1; /* to be below the parent element */ } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Position a pseudo-element below its parent</title> </head> <body> <div id="element"> </div> </body> </html>
试试吧
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
