我试图用:后伪元素CSS选择器样式一个元素

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

似乎::后面的元素不能比元素本身更低。

有没有办法让伪元素低于元素本身?


当前回答

这里有两个问题:

The CSS 2.1 specification states that "The :beforeand :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element." Given the way z-indexes are implemented in most browsers, it's pretty difficult (read, I don't know of a way) to move content lower than the z-index of their parent element in the DOM that works in all browsers. Number 1 above does not necessarily mean it's impossible, but the second impediment to it is actually worse: Ultimately it's a matter of browser support. Firefox didn't support positioning of generated content at all until FF3.6. Who knows about browsers like IE. So even if you can find a hack to make it work in one browser, it's very likely it will only work in that browser.

我能想到的唯一一件事是跨浏览器工作是使用javascript插入元素,而不是CSS。我知道这不是一个很好的解决方案,但是:before和:after伪选择器看起来并不能解决这个问题。

其他回答

这里有两个问题:

The CSS 2.1 specification states that "The :beforeand :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element." Given the way z-indexes are implemented in most browsers, it's pretty difficult (read, I don't know of a way) to move content lower than the z-index of their parent element in the DOM that works in all browsers. Number 1 above does not necessarily mean it's impossible, but the second impediment to it is actually worse: Ultimately it's a matter of browser support. Firefox didn't support positioning of generated content at all until FF3.6. Who knows about browsers like IE. So even if you can find a hack to make it work in one browser, it's very likely it will only work in that browser.

我能想到的唯一一件事是跨浏览器工作是使用javascript插入元素,而不是CSS。我知道这不是一个很好的解决方案,但是:before和:after伪选择器看起来并不能解决这个问题。

说到规范(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>

将:before或:after伪元素的z-index设置为-1,并赋予它一个符合z-index属性的位置(绝对、相对或固定)。这是因为伪元素的z-index相对于它的父元素,而不是<html>,这是其他元素的默认值。这是有意义的,因为它们是<html>的子元素。

我遇到的问题(导致我提出这个问题和上面接受的答案)是,我试图使用一个:after伪元素来获得一个z-index为15的元素的背景,即使设置为z-index为14,它仍然在其父元素的顶部呈现。这是因为,在那个堆叠环境中,它的父结点的z-index是0。

希望这能帮你弄清楚到底发生了什么。

我知道这个问题很古老,也有一个公认的答案,但我找到了一个更好的解决方案。我把它贴在这里,这样我就不会产生重复的问题,而且解决方案仍然可供其他人使用。

切换元素的顺序。对于应该在下面的内容,在伪元素之前使用:,并调整页边距进行补偿。边缘清理可能会很混乱,但所需的z-index将被保留。

我已经成功地用IE8和FF3.6测试了这个功能。