使用::before伪元素时position:absolute属性不生效的问题咨询

核心问题原因 #

• .header 元素默认是 position: static（静态定位），导致其 ::before 伪元素的绝对定位会以视口为参考容器，而非.header，所以top/left的调整效果不符合预期。
• 绝对定位元素脱离文档流，height: auto时没有内容支撑，高度会塌陷为0，直接看不到背景图；设置height: 100%时，因为父元素.header没有明确高度，百分比高度没有参考值，同样无法正常显示。

修复方案 #

1. 给.header设置position: relative，让伪元素的绝对定位以它为参考容器。
2. 让伪元素的高度匹配.header的实际高度，推荐用更简洁的方式实现：

修改后的CSS代码 #

body {
    margin: 0;
    padding: 0;
}

.header {
    text-align: center;
    position: relative; /* 设置相对定位，作为伪元素的定位参考 */
    min-height: 100vh; /* 可选：让header占满视口高度，可根据需求调整 */
    padding: 2rem 0; /* 可选：用内边距撑开容器，适配内部内容 */
}

.header::before {
    content: "";
    background: url("https://wallpaperbat.com/img/138398-ufc-hd-wallpaper-and-background-image.jpg") no-repeat center center/cover;
    position: absolute;
    inset: 0; /* 替代top/left/width/height，自动填充整个父容器 */
    z-index: -1;
    opacity: 0.8;
}
.navbar {
    display: flex;
    justify-content: space-between;
}
.r-wing, .l-wing {
    display: flex;
}

.l-wing {
    width: 30%;
    justify-content: space-around;
}

.no-disc {
    list-style-type: none;
}

额外说明 #

• inset: 0 是CSS简写属性，等价于top:0; right:0; bottom:0; left:0，能让绝对定位元素完全填充父容器，比单独设置宽高更简洁。
• 如果不需要.header占满视口高度，可去掉min-height:100vh，仅保留position:relative和伪元素的inset:0，伪元素会自动匹配.header由内容撑开的高度。

内容的提问来源于stack exchange，提问作者ashCold