由于某种原因,当添加元素的伪子节点时,其z-index高于其子节点,即使它是::before
元素,它出现在相关子节点之前,但不是这样显示。为什么会发生这种情况,有没有办法解决它?
这是一个示例,其中子<h1>
节点 应该显示为将其悬停在黑色伪元素上,但事实并非如此。
https://jsfiddle.net/9u33vko0/
我的理解是否从根本上是错误的?
div {
width: 100%;
padding: 40px 0;
border: 1px solid #DDD;
text-align: center;
color: #FFF;
position: relative;
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #000;
width: 100%;
}
<div>
<h1> <!-- should appear above the black ::before element -->
Hello, World!
</h1>
</div>
答案 0 :(得分:2)
即使:before
伪元素在 DOM中的h1
元素之前出现,它仍然会与h1
元素重叠,因为它{{3}因为它被定位(使用position: absolute
)。
以下是establishes a stacking context(绘画顺序;第8点)
的相关引用所有定位的后代都以
z-index: auto
或z-index: 0
按树顺序排列。对于那些z-index: auto
的人,请将元素视为创建新的堆叠上下文...
因此,您可以通过定位h1
元素来建立堆叠上下文(即添加position: relative
)。这样做时,h1
元素将放置在:before
伪元素之上,因为它出现在DOM中的伪元素之后,并且两个元素都以z-index
auto
定位}。
CSS2 specification on stacking contexts
h1 {
position: relative;
}
div {
width: 100%;
padding: 40px 0;
border: 1px solid #DDD;
text-align: center;
color: #FFF;
position: relative;
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #000;
width: 100%;
}
h1 {
position: relative;
}
&#13;
<div>
<h1>Hello, World!</h1>
</div>
&#13;
当然,你也可以给伪元素一个负z-index
,但除了这一点之外。归结到它时,建立堆叠上下文就足够了,因为:before
伪元素出现在DOM中的h1
元素之前(正如您已经指出的那样)。