是否可以设置其父元素下方的伪元素的堆叠顺序?

我正在尝试用伪元素CSSselect器来devise一个元素

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

看起来像:after元素不能低于元素本身。

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

伪元素被视为其关联元素的后代。 要在其父代下面放置一个伪元素,必须创build一个新的堆栈上下文来更改默认的堆叠顺序。
定位伪元素(绝对)并分配除“auto”之外的z-index值将创build新的堆栈上下文。

 #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> 

我知道这是一个古老的线程,但我觉得需要发表正确的答案。 这个问题的实际答案是你需要在伪元素的父元素上创build一个新的堆栈上下文(实际上你必须给它一个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; } 

它与使用之前或之后无关:在伪元素之后。

 #parent { position: relative; z-index: 1; } #pseudo-parent { position: absolute; } /* no z-index required */ #pseudo-parent:after { position: absolute; z-index: -1; } /* Example styling to illustrate */ #pseudo-parent { background: #d1d1d1; } #pseudo-parent:after { margin-left: -3px; content: "M" } 
 <div id="parent"> <div id="pseudo-parent"> &nbsp; </div> </div> 

有两个问题在这里玩:

  1. CSS 2.1规范指出:“之前和之后:伪元素元素与其他框交互,如运行框,就好像它们是插入其关联元素内的真实元素一样。 考虑到在大多数浏览器中实现z-index的方式,在DOM中运行的内容比在所有浏览器中工作的父元素的z-index要低很多(阅读,我不知道有什么办法)。

  2. 上面的数字1并不一定意味着它是不可能的,但是第二个障碍实际上更糟糕:最终这是浏览器支持的问题。 在FF3.6之前,Firefox根本不支持生成内容的定位。 谁知道像IE浏览器。 所以即使你可以在一个浏览器中find一个黑客工作,它很可能只能在该浏览器中工作。

我能想到的唯一可以跨浏览器使用的是使用javascript来插入元素而不是CSS。 我知道这不是一个好的解决scheme,但是:之前和之后:伪select器看起来并不像是要在这里切割。

关于规范( http://www.w3.org/TR/CSS2/zindex.html ),由于a.someSelector被定位,它创build了一个新的堆栈上下文,它的子节点不能脱离。 留下a.someSelector unpositioned然后子a.someSelector:之后可能被定位在与a.someSelector相同的上下文中。

我知道这个问题是古老的,有一个可以接受的答案,但我find了一个更好的解决scheme。 我在这里发布它,所以我不会创build一个重复的问题,解决scheme仍然可以为其他人。

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

我已经testing了与IE8和FF3.6成功。