是否可以设置其父元素下方的伪元素的堆叠顺序？
我正在尝试用伪元素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"> </div> </div>
有两个问题在这里玩：
-
CSS 2.1规范指出：“之前和之后：伪元素元素与其他框交互，如运行框，就好像它们是插入其关联元素内的真实元素一样。 考虑到在大多数浏览器中实现z-index的方式，在DOM中运行的内容比在所有浏览器中工作的父元素的z-index要低很多（阅读，我不知道有什么办法）。
-
上面的数字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成功。
