CSS绝对定位内容层级与禁止背景滚动相关技术问题咨询

问题1：文本与遮罩的层级差异成因 #

你对::before的渲染逻辑理解存在偏差，伪元素的::before命名仅代表它是插入到父元素内部所有真实子节点之前的逻辑节点，最终堆叠顺序不由插入顺序决定，而是遵循CSS堆叠上下文规则：

• 你的.wrapper::before设置了position: absolute，属于定位元素，默认z-index: auto，堆叠层级高于所有非定位（position: static，即不设置position属性的默认状态）的元素
• 当.content不设置position时，属于非定位元素，堆叠层级低于定位的遮罩，因此被遮挡
• 当.content设置position: absolute后，也变成定位元素，且它的DOM逻辑顺序在::before之后，同层级定位元素按DOM顺序后渲染的叠在上方，因此文本显示在遮罩前面

问题2：文本溢出后页面滚动、背景露出空白的修复 #

这个问题有两个核心原因：

1. 你没有限制.content的最大高度，文本过多时会撑开整个文档流高度，而.wrapper仅设置了100vh高度，滚动超出视口的部分没有背景
2. 你没有给.content设置滚动规则，溢出的内容默认会透出到父级外触发页面滚动，同时你原始代码中.content的top属性漏写了冒号，属于语法错误也会导致定位异常。

修复方案：

• 给.wrapper添加position: relative，让内部绝对定位元素相对于父容器定位，而不是全局视口
• 给.content补全top属性语法，添加transform: translateY(-50%)配合实现垂直居中，再增加max-height限制和滚动规则，让超出高度的内容仅在.content内部滚动

修复后的核心代码示例：

.wrapper{
  height:100vh;
  background: url('https://wallpaperaccess.com/full/257525.jpg') no-repeat center center / cover;
  background-attachment: fixed;
  position: relative; /* 新增 */
  overflow: hidden; /* 可选，避免边缘溢出 */
}

.content{
  position:absolute;
  color:#fff;
  top: 50%; /* 修正原来的笔误，补全冒号 */
  transform: translateY(-50%); /* 新增，实现垂直居中 */
  left:0;
  right:0;
  width:50%;
  margin:auto;
  text-align: center;
  max-height: 80vh; /* 新增，限制最大高度，可自定义占比 */
  overflow-y: auto; /* 新增，内容溢出时仅当前区域滚动 */
}

问题3：使用position: relative + z-index: 1的方案可行性 #

完全可以，只要是position属性不为static的元素都属于定位元素，都可以参与层级排序：

• 你只需要给.content设置position: relative; z-index: 1;，它的堆叠层级就会高于默认z-index: auto的遮罩层，完全可以实现和absolute方案一样的显示效果
• 甚至不需要额外设置z-index，只要设置了position: relative，作为DOM顺序更靠后的定位元素，默认就会叠在::before的上方，仅需额外调整垂直居中的规则即可

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