我试图用:after伪元素CSS选择器设置元素的样式
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
似乎::after元素不能低于元素本身。
有没有办法让伪元素低于元素本身？
Pseudo-elements被视为其相关元素的后代。要将伪元素定位在其父元素下方，您必须创建一个new stacking context来更改默认的堆叠顺序。 定位伪元素（绝对）并指定除“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，而不仅仅是一个位置）。
像这样：
#parent {
position: relative;
z-index: 1;
}
#pseudo-parent {
position: absolute;
/* no z-index allowed */
}
#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;
}
它与使用：before或：after伪元素无关。
#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>试试看
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
这里有两个问题：
:beforeand :after伪元素元素与其他框架相互作用，例如run-in box，就好像它们是插入其关联元素内部的真实元素一样。”鉴于在大多数浏览器中实现z索引的方式，在所有浏览器中工作的DOM中移动内容低于其父元素的z-index非常困难（阅读，我不知道一种方法）。我能想到的唯一可以跨浏览器工作的是使用javascript来插入元素而不是CSS。我知道这不是一个很好的解决方案，但:before和:after伪选择器真的看起来不像他们会在这里削减它。
关于规范（http://www.w3.org/TR/CSS2/zindex.html），自a.someSelector定位以来，它创造了一个新的堆叠环境，其子项无法突破。保持a.someSelector未定位，然后孩子a.someSelector:after可能位于与a.someSelector相同的上下文中。
我知道这个问题很古老，并且有一个公认的答案，但我找到了一个更好的解决方案。我在这里发布它所以我不会创建一个重复的问题，并且该解决方案仍然可供其他人使用。
切换元素的顺序。将:before伪元素用于下面的内容，并调整边距以进行补偿。保证金清理可能很混乱，但所需的z-index将被保留。
我用IE8和FF3.6成功测试了这个。
将z-index或:before伪元素的:after设置为-1，并给它一个position，以纪念z-index属性（absolute，relative或fixed）。这是因为伪元素的z-index是相对于其父元素，而不是<html>，这是其他元素的默认值。这是有道理的，因为它们是<html>的子元素。
我遇到的问题（引导我回答这个问题以及上面接受的答案）是因为我试图使用:after伪元素来获得带有z-index为15的元素的背景，甚至当用z-index设置时14，它仍然在其父母之上呈现。这是因为，在该堆叠上下文中，它的父级具有0的z-index。
希望这有助于澄清一些正在发生的事情。
我不知道是否有人会遇到同样的问题。所选答案部分正确。
你需要拥有的是：
parent{
z-index: 1;
}
child{
position:relative;
backgr
我修复它非常简单：
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: -1;
}
这样做是将父级堆叠在z-index：1，这使得子级空间在z-index：0处'结束'，因为z-index上的其他dom元素“存在”：0。如果我们不给父项的z-index为1，子项将最终低于其他dom元素，因此将不可见。
这也适用于伪元素，如：after