::after伪元素设position:fixed后以视口为参考系，top/right/bottom/left:0即可撑满全屏，比vw/vh更可靠；需设content:""且用rgba()调背景透明度，z-index需合理协调层级。
为什么 ::after 伪元素加 position: fixed 能撑满全屏
因为 ::after 生成的伪元素默认是行内级，但一旦设为 position: fixed，它就脱离文档流，并以视口（viewport）为参考系定位。只要把 top、right、bottom、left 全设为 0，它就会拉伸到整个可视区域——这比用 width: 100vw; height: 100vh 更可靠，不受滚动条宽度或缩放抖动影响。
常见错误是只写 width: 100%; height: 100% 却没加 position: fixed，结果伪元素仍受父容器尺寸限制，根本铺不满。
- 必须显式设置
content: ""，否则::after不渲染 - 父元素无需特殊定位（比如不用
position: relative），因为fixed是相对于视口，不是父元素 - 若页面有横向滚动，
100vw可能导致遮罩层宽度不足，而top/right/bottom/left: 0自动适应
如何避免遮罩层挡住页面交互元素
遮罩层默认会覆盖所有内容，包括按钮、输入框。关键在 z-index 层级控制——它不能盲目设很高，得和页面其他固定元素（如导航栏、弹窗）协调。
典型场景：你希望遮罩层盖住主内容区，但不遮挡顶部导航栏（z-index: 100）和模态框（z-index: 1000）。这时遮罩层设 z-index: 99 就刚刚好。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层
z-index必须大于被遮盖内容的层级，但小于需要浮在它上面的 UI 元素 - 不要用超大数值如
z-index: 9999，容易和后续组件冲突 - 如果遮罩后还要点击穿透（比如只做视觉遮盖），加
pointer-events: none；但多数情况要阻断操作，就保持默认auto
background-color 透明度选 rgba() 还是 opacity
优先用 background-color: rgba(0, 0, 0, 0.5)，而不是给整个伪元素设 opacity: 0.5。后者会让伪元素里所有内容（哪怕为空）都变透明，虽然当前没内容，但一旦未来误加 content 文字或图标，就会一起发虚，调试时很难察觉。
-
rgba()只影响背景色，不影响伪元素自身结构和其他可能的子内容 -
opacity是作用于整个元素及其后代的合成属性，不可继承，但会“传染” - 若需兼容 IE8，
rgba()不支持，得用半透 PNG 图片或滤镜，但现在基本可忽略
实际可用的一段最小化代码
下面这段可以直接复制使用，已避开常见坑：
body::after {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
pointer-events: auto;
}
注意：如果遮罩只针对某个模块而非全屏，就把 ::after 挂在那个模块容器上，并给该容器加 position: relative（此时伪元素用 position: absolute 更合适）。全屏场景下，body::after 最省事，但要小心某些框架（如 Vue/React）动态操作 body 类名或样式时可能意外触发重绘。
