为何设置为绝对定位的全屏遮罩在页面滚动时透出隐藏内容？

• 百分比高度生效条件缺失：给body设置的height: 100%需要依托父级html元素的高度定义才能计算，未给html设置对应高度时，这个值只会匹配初始视口高度，不会随页面内容溢出后的总文档高度延伸。
• 绝对定位的覆盖范围存在固有局限：当没有已定位的祖先元素时，position: absolute的定位参考是初始包含块（即浏览器视口边界），它的高度会被计算为视口高度，不会随页面内容总高度延伸；加上页面溢出后出现滚动条时，遮罩也不会跟着滚动覆盖可视区域，自然会透出下方未被遮挡的内容。
• 缺失层级定义：遮罩没有设置z-index，就算高度匹配，也存在被其他低层级定位元素覆盖的潜在风险。

按如下规则调整CSS即可实现全场景下的遮罩效果：

/* 补全根元素的基础规则，消除默认边距带来的额外滚动偏移 */
html, body {
  margin: 0;
  height: 100%;
}

p {
  margin: 300px 0;
}

.modal {
  /* *核心改动*：把绝对定位换成固定定位 */
  position: fixed;
  background-color: black;
  color: white;
  top: 0;
  left: 0;
  width: 100%;
  /* 用视口单位替代百分比高度，彻底绕开父级依赖问题 */
  height: 100vh;
  /* 补上层级，确保遮罩始终在普通内容上方 */
  z-index: 999;
}

.first {
  color: red;
}

• position: fixed的元素直接相对于浏览器视口定位，和页面滚动状态、内容总高度没有绑定关系，不管页面有没有溢出、滚动位置在哪，都会固定铺满当前可视区域，不会出现遮罩范围不足的问题。
• 替换为height: 100vh可以彻底规避百分比高度的父级依赖问题，100vh直接对应当前视口的全高度，不存在计算偏差。
• 加上z-index: 999是做模态遮罩的常规适配项，可以避免遮罩被普通文档流元素、低层级的定位元素盖住。

如果你需要的是“覆盖从页面最顶端到最底端所有滚动区域的全页遮罩”，而非跟随视口的弹窗遮罩，可以把定位改回absolute，同时给遮罩设置min-height: 100vh，并确保html, body没有设置overflow: hidden限制高度即可。但常规交互场景下，模态遮罩用固定定位才是符合用户预期的——打开弹窗时通常会锁定页面滚动，遮罩跟随视口不随页面滚动才不会产生交互错乱。

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