是否可以在其父元素下方设置伪元素的堆叠顺序？\[重复\]
我正在尝试使用:after伪元素CSS选择器设置元素的样式
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
似乎::after元素不能低于元素本身。
有没有办法使伪元素低于元素本身？
第3145篇《是否可以在其父元素下方设置伪元素的堆叠顺序？\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
设置z-index了的:before或者:after伪元素为-1，并给它一个position是荣誉z-index性质（absolute，relative，或fixed）。之所以可行，z-index是因为伪元素是相对于其父元素的，而不是<html>，这是其他元素的默认设置。这是有道理的，因为它们是的子元素<html>。
我遇到的问题（导致我提出上述问题和上面的可接受的答案）是我试图使用:after伪元素来获得背景值为z-index15 的元素的幻想，甚至设置z-index为14时也是如此。它仍在其父项之上呈现。这是因为，在该堆叠上下文中，其父级的a z-index为0。
希望这有助于澄清发生了什么。
我不知道有人会对此有同样的问题。所选答案部分正确。
您需要具备的是：
parent{
z-index: 1;
}
child{
position:relative;
backgr
我知道这是一个老话题，但是我觉得有必要发布正确的答案。这个问题的实际答案是，您需要使用伪元素在元素的父元素上创建一个新的堆叠上下文（实际上，您必须为其赋予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>我知道这个问题很古老，并且可以接受，但是我找到了一个更好的解决方案。我将其张贴在这里，所以我不会创建重复的问题，其他人仍然可以使用该解决方案。
切换元素的顺序。对:before下面的内容使用伪元素，并调整边距以进行补偿。边距清理可能很麻烦，但所需的z-index将保留下来。
我已经使用IE8和FF3.6成功测试了此功能。
就规范（http://www.w3.org/TR/CSS2/zindex.html）而言，由于a.someSelector它的位置确定，它创建了一个新的堆叠上下文，其子元素无法脱离。保持a.someSelector未a.someSelector:after定位状态，然后将孩子定位在与相同的上下文中a.someSelector。
Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order.
Positioning the pseudo-element (absolute) and assigning a z-index value other than “auto” creates the new stacking context.
#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>这里有两个问题在起作用：
CSS 2.1规范指出：“ :before和:after伪元素元素与其他框（例如，可插入框）进行交互，就好像它们是插入其关联元素内的真实元素一样。” 考虑到大多数浏览器中实现z-index的方式，将内容移动到在所有浏览器中都可用的DOM中低于其父元素的z-index的位置相当困难（阅读，我不知道一种方法）。
上面的数字1并不一定意味着它是不可能的，但实际上它的第二个障碍实际上更糟：最终，这取决于浏览器的支持。直到FF3.6，Firefox才完全不支持生成内容的定位。谁知道像IE这样的浏览器。因此，即使您可以找到一种可以使其在一个浏览器中运行的黑客工具，也很有可能仅在该浏览器中工作。
我唯一能想到的是，它可以跨浏览器使用，是使用javascript而不是CSS来插入元素。我知道这不是一个很好的解决方案，但是:before和:after伪选择器真的看起来好像不会在这里切开。
试试看
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
相似问题
问题类别
我将其修复非常简单：
这是在父级的z-index：1处堆叠父级，这给子级的空间提供了“终止于” z-index：0的空间，因为其他dom元素“存在”于z-index：0。如果我们不给出父级的z索引为1，则子级最终将在其他dom元素之下，因此将不可见。
这也适用于伪元素，如：after