此问题在此处已有答案：
Why does position:relative; appear to change the z-index?（2个答案）
Why setting absolutely positioned element's sibling as position:relative, brings it above the former?（1个答案）
2天前关闭。
堆栈顺序在这个代码段中是如何变化的
<article class="about-img">
<img src="./images/about.jpeg" class="about-photo" />
</article>.about-img::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 0.5rem solid var(--primaryColor);
top: -1.5rem;
left: -1.5rem;
}
.about-img {
position: relative;
}那为什么还要
.about-photo{
position :relative
}使它显示在::before伪元素的顶部我知道我可以使
.about-img::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 0.5rem solid var(--primaryColor);
top: -1.5rem;
left: -1.5rem;
z-index : -1
}
.about-img {
position: relative;
z-index:1
}使其显示在伪元素边界的顶部，但为什么要将position : relative添加到about-photo并更改堆栈顺序呢？
1条答案
按热度按时间4xrmg8kj1#
我相信这是由于如何在堆叠上下文中绘制层。
当
.about-photo没有position属性时，它会在::beforepsuedo元素之前绘制，因为::before有position属性，这意味着它会在稍后绘制。将
position:relative添加到.about-photo意味着::before和.about-photo处于相同的绘制级别。这导致堆叠顺序由DOM顺序决定-在DOM中::before元素早于.about-photo，因此绘制在.about-photo之后。如果将
::before更改为::after，您可以看到这一点-伪元素移动到.about-photo的前面，因为它们位于相同的堆栈级别，但伪元素现在出现在DOM的后面之前有几个堆栈溢出问题的答案，其中有更详细的内容，例如：Why does absolute positioned element is displayed over a static one?和Why position: relative without z-index creates a new stacking context?
此行为的规范：https://www.w3.org/TR/CSS2/visuren.html#propdef-z-index