为何设置absolute定位伪元素后，父容器.section-1的子元素需设position: relative才能显示？

这个问题的核心是CSS堆叠上下文与定位层级的逻辑，我给你拆解明白：

首先，你给.section-1设置了position: relative，这让它成为内部绝对定位元素（也就是那个::before伪元素）的定位上下文——伪元素会完全贴合.section-1的边界铺满整个容器。

而绝对定位元素有个关键特性：它会脱离正常文档流，并且默认的堆叠层级（和z-index相关）比静态定位（position: static，所有元素的默认定位方式）的元素更高。所以你的伪元素会直接覆盖在.section-1里所有默认静态定位的子元素上方，导致这些子元素看起来像是被透明背景“压在下面”，没法正常显示。

当你给子元素加上position: relative后，它们的定位方式从静态转为相对定位，堆叠层级会自动提升，超过绝对定位的伪元素，自然就能正常显示在背景图上方了。

更简洁的替代方案： #

其实不用给所有子元素都加position: relative，只要给伪元素设置z-index: -1，让它跑到父容器的底层就行。这样哪怕子元素是默认的静态定位，也能稳稳显示在伪元素上方。修改后的伪元素CSS如下：

.section-1::before {
  content: "";
  background-image: url("https://i.sstatic.net/XPTjz.jpg");
  background-size: cover;
  position: absolute;
  background-position: bottom;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.75;
  z-index: -1; /* 添加这一行，把伪元素放到容器底层 */
}

调整后，你可以把.navigation-bar、.header-content这些子元素的position: relative去掉，它们依然能正常显示在背景图上，代码也更清爽。

内容的提问来源于stack exchange，提问作者herbert mühlex