CSS 是否可以在其父元素下方设置伪元素的堆叠顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3032856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to set the stacking order of pseudo-elements below their parent element?
提问by adardesign
I am trying to style a element with the :afterpseudo element CSS selector
我正在尝试使用:after伪元素 CSS 选择器设置元素样式
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
It seems like the ::afterelement can not be lower then the element itself.
似乎::after元素不能低于元素本身。
Is there a way to have the pseudo element lower then the element itself?
有没有办法让伪元素低于元素本身？
回答by Arley
Pseudo-elementsare treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking contextto change the default stacking order.
Positioning the pseudo-element (absolute) and assigning a z-index value other than “auto” creates the 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>回答by Adam
I know this is an old thread, but I feel the need to post the proper answer. The actual answer to this question is that you need to create a new stacking context on the parent of the element with the pseudo element (and you actually have to give it a z-index, not just a position).
我知道这是一个旧线程，但我觉得有必要发布正确的答案。这个问题的实际答案是，您需要使用伪元素在元素的父元素上创建一个新的堆叠上下文（并且您实际上必须给它一个 z-index，而不仅仅是一个位置）。
Like this:
像这样：
#parent {
position: relative;
z-index: 1;
}
#pseudo-parent {
position: absolute;
/* no z-index allowed */
}
#pseudo-parent:after {
position: absolute;
top:0;
z-index: -1;
}
It has nothing to do with using :before or :after pseudo elements.
它与使用 :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>回答by Eugen Govorun
Try it out
试试看
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
回答by Gabriel Hurley
There are two issues are at play here:
这里有两个问题在起作用：
The CSS 2.1 specification states that "The
:beforeand:afterpseudo-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.
CSS 2.1 规范声明“The
:before和:afterpseudo-elements 元素与其他框交互，例如插入框，就好像它们是插入到关联元素中的真实元素一样。” 鉴于在大多数浏览器中实现 z-index 的方式，在所有浏览器中都有效的 DOM 中将内容移动到低于其父元素 z-index 的位置是非常困难的（阅读，我不知道有什么方法）。上面的数字 1 并不一定意味着它不可能，但它的第二个障碍实际上更糟：归根结底是浏览器支持的问题。Firefox 在 FF3.6 之前根本不支持生成内容的定位。谁知道像IE这样的浏览器。因此，即使您可以找到一种方法使其在一个浏览器中运行，它也很可能只能在该浏览器中运行。
The only thing I can think of that's going to work across browsers is to use javascript to insert the element rather than CSS. I know that's not a great solution, but the :beforeand :afterpseudo-selectors just really don't look like they're gonna cut it here.
我能想到的唯一可以跨浏览器工作的方法是使用 javascript 来插入元素而不是 CSS。我知道这不是一个很好的解决方案，但是:before和:after伪选择器看起来真的不像他们会在这里剪掉它。
回答by cweider
Speaking with regard to the spec (http://www.w3.org/TR/CSS2/zindex.html), since a.someSelectoris positioned it creates a new stacking context that its children can't break out of. Leave a.someSelectorunpositioned and then child a.someSelector:aftermay be positioned in the same context as a.someSelector.
说到规范 ( http://www.w3.org/TR/CSS2/zindex.html)，因为a.someSelector它被定位，它创建了一个新的堆叠上下文，它的子级无法突破。保持未a.someSelector定位，然后 childa.someSelector:after可能被定位在与 相同的上下文中a.someSelector。
回答by D.N.
I know this question is ancient and has an accepted answer, but I found a better solution to the problem. I am posting it here so I don't create a duplicate question, and the solution is still available to others.
我知道这个问题很古老并且有一个公认的答案，但我找到了一个更好的解决方案。我在这里发布它，所以我不会创建重复的问题，并且其他人仍然可以使用该解决方案。
Switch the order of the elements. Use the :beforepseudo-element for the content that should be underneath, and adjust margins to compensate. The margin cleanup can be messy, but the desired z-indexwill be preserved.
切换元素的顺序。对:before应该在下面的内容使用伪元素，并调整边距以进行补偿。边距清理可能很麻烦，但z-index会保留所需的内容。
I've tested this with IE8 and FF3.6 successfully.
我已经用 IE8 和 FF3.6 成功测试了这个。
回答by Noah Erickson
Set the z-indexof the :beforeor :afterpseudo element to -1 and give it a positionthat honors the z-indexproperty (absolute, relative, or fixed). This works because the pseudo element's z-indexis relative to its parent element, rather than <html>, which is the default for other elements. Which makes sense because they are child elements of <html>.
设置z-index了的:before或者:after伪元素为-1，并给它一个position是荣誉z-index性质（absolute，relative，或fixed）。这是有效的，因为伪元素的z-index相对于其父元素，而不是<html>，这是其他元素的默认值。这是有道理的，因为它们是<html>.
The problem I was having (that lead me to this question and the accepted answer above) was that I was trying to use a :afterpseudo element to get fancy with a background to an element with z-indexof 15, and even when set with a z-indexof 14, it was still being rendered on top of its parent. This is because, in that stacking context, it's parent has a z-indexof 0.
我遇到的问题（导致我提出这个问题和上面接受的答案）是我试图使用:after伪元素来获得背景为z-index15的元素，即使设置z-index为 14，它仍然在其父级之上呈现。这是因为，在该堆叠上下文中，它的父级的 az-index为 0。
Hopefully that helps clarify a little what's going on.
希望这有助于澄清一些正在发生的事情。
回答by Wachem
I fixed it very simple:
我修复它很简单：
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: -1;
}
What this does is stack the parent at z-index: 1, which gives the child room to 'end up' at z-index: 0 since other dom elements 'exist' on z-index: 0. If we don't give the parent an z-index of 1 the child will end up below the other dom elements and thus will not be visible.
这样做是在 z-index: 1 处堆叠父级，这使子级空间可以在 z-index: 0 处“结束”，因为其他 dom 元素在 z-index: 0 上“存在”。如果我们不给父元素的 z-index 为 1，子元素最终会低于其他 dom 元素，因此将不可见。
This also works for pseudo elements like :after
这也适用于伪元素，如:after
回答by Rodrigo García
I don't know if someone will have the same issue with this. The selected answer is partially correct.
不知道会不会有人遇到同样的问题。所选答案部分正确。
What you need to have is:
你需要的是：
parent{
z-index: 1;
}
child{
position:relative;
backgr
