z-index当使用:: after下的元素 [英] z-index when using ::after under element
问题描述
如果我们使用 z-index
结合 position:absolute;
,可以将 :: before
。有一个很好的例子,介绍
无效: https://jsfiddle.net/ Ldtfpvxy / 1 / (只添加 z-index:1;
到元素)
您的div及其伪子元素是同一堆栈上下文的成员,在这种情况下是根堆叠上下文。您提供伪元素的新堆叠上下文将用作对其子代(不存在)的引用,但 z-index
值适用于当前堆叠上下文。而且 CSS规格规定了每个堆叠上下文的以下绘制顺序:
在每个堆叠上下文中,以下图层在
中按照从前到后的顺序绘制:
子堆叠上下文具有负堆栈级别>
非定位浮动广告。
非定位浮动广告。
子级堆栈上下文与堆栈级别0和定位的后代与堆栈级别为0的子级堆栈上下文
查看 的堆叠上下文的子项,例如 div :: after
具有堆栈级别0的定位后代,例如 div
本身。这解释了你注意到的行为。
If we use z-index
combined with position: absolute;
its possible to place the ::before
of a element under itself. There is a good example on another question (jsfiddle.net/Ldtfpvxy).
Basically
<div id="element"></div>
#element {
position: relative;
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 */
}
renders:
So the stacking context/order is defined by z-index
. But when I apply z-index: 1;
to the element and z-index: -1;
to its ::before
I cannot achieve the same thing.
Only if I omit z-index
from the element.
Any ideas why this is? Is the element rendered after its ::before
& ::after
pseudos so they get the same z-index
?
Working: https://jsfiddle.net/Ldtfpvxy/
Not working: https://jsfiddle.net/Ldtfpvxy/1/ (only added z-index: 1;
to element)
Your div and its pseudo-child are members of the same stacking context, in this case the root stacking context. The new stacking context you give the pseudo-element would be used as a reference to its children (which are non-existant), but the z-index
value applies to the current stacking context. And the CSS spec dictates the following paint order for each stacking context:
Within each stacking context, the following layers are painted in back-to-front order:
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- the child stacking contexts with positive stack levels (least positive first).
Look, child stacking contexts with negative stack levels, such as your div::after
are painted before the positioned descendants with stack level 0, such as the div
itself. This explains the behavior you noticed.
这篇关于z-index当使用:: after下的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!