用::after做全屏蒙版需设position:fixed+100vw/100vh，因默认相对父元素定位；body/html直接使用易失效，应选稳定容器并设min-height:100vh和position:relative；z-index错乱需检查层叠上下文；移动端推荐用真实DOM替代伪元素。
用 ::after 做全屏蒙版为什么总不覆盖整个视口？
因为 ::after 默认是相对于父元素定位的，不是视口。哪怕父元素高度不够（比如只有内容高），蒙版就只能盖住那一小块——这不是你想要的“整页覆盖”。
必须让伪元素脱离文档流，并锚定到视口尺寸上：
- 父容器需设
position: relative（否则absolute会往上找，可能跑到body或html上，而它们未必撑满视口） -
::after要设position: fixed，不是absolute；top: 0; left: 0; width: 100vw; height: 100vh - 加
z-index确保压在内容上，但别设太高（比如9999），避免干扰其他弹层逻辑
示例最小可用代码：
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 100;
}
为什么不用 body 或 html 直接做伪元素？
因为 html 和 body 在多数浏览器里默认不触发 ::after 渲染（尤其当它们没显式设 height 或 min-height 时）。更麻烦的是：如果页面内容短，body 高度就只有一屏，::after 也只盖一屏；滚动后下方就露白。
立即学习“前端免费学习笔记（深入）”；
解决办法很直接：
- 选一个稳定、始终存在且能撑满布局的容器，比如
#app（Vue/React 根节点）、.page-wrapper，或者干脆用body但配合min-height: 100vh - 确保该容器有
position: relative，否则fixed伪元素虽能覆盖全屏，但可能被其他transform或filter容器截断（形成新的 stacking context）
z-index 层级错乱导致蒙版被内容穿透怎么办？
常见现象：按钮、下拉菜单、图片依然能点、能展开，像蒙版根本不存在。本质是蒙版和目标元素不在同一 stacking context，或目标元素的 z-index 更高且其父容器形成了独立层叠上下文。
排查和修复要点：
- 检查蒙版父容器是否意外加了
transform、opacity 、<code>will-change、filter—— 这些都会创建新 stacking context，把子元素的z-index锁死在内部 - 确认蒙版的
z-index数值确实大于所有要遮挡的 UI 元素（比如弹窗通常用1000，那蒙版至少得1001） - 如果用
position: fixed，蒙版天然脱离普通文档流，但若父容器有transform，它仍会被“框住”——此时应把伪元素挂到更外层（如直接挂body，并补min-height: 100vh）
移动端 Safari 中蒙版闪动或失效怎么处理？
iOS Safari 对 fixed 定位 + transform 组合特别敏感，尤其是页面有滚动或键盘弹出时，::after 可能重绘异常、偏移、甚至消失。
稳妥做法：
- 避免在蒙版父容器上使用
transform（包括scale、translateZ等） - 给
::after加-webkit-transform: translateZ(0)强制硬件加速（但仅在必要时加，否则可能引发闪烁） - 更推荐方案：用一个空
<div id="overlay"></div>替代伪元素，CSS 控制它，JS 动态增删 class 控制显隐——可控性远高于伪元素
伪元素省代码，但复杂交互场景下，真实 DOM 节点才是最不容易翻车的选择。
真正难的不是写几行 CSS，而是想清楚：这个蒙版到底要盖住谁、在什么时机出现、会不会和滚动/键盘/动画共存——这些决定了你该用伪元素，还是老老实实加个 div。
