position: fixed 是唯一靠谱的选择，因其始终锚定视口，确保遮罩全屏覆盖且不随滚动偏移；absolute 易受祖先 overflow/transform 截断，relative 不脱离文档流无法覆盖。
必须用 position: fixed，其他定位方式在滚动、嵌套或移动端下基本不可靠。
为什么 position: fixed 是唯一靠谱的选择
遮罩要盖住整个可视区域，且不随页面滚动偏移。position: absolute 会相对于最近的定位祖先计算位置——如果那个祖先设置了 overflow: hidden、transform 或高度不足，遮罩就会被截断或错位；position: relative 根本不脱离文档流，连“覆盖”都做不到。fixed 始终锚定视口，天然满足全屏 + 防滚动需求。
常见错误现象：top: 0; left: 0; width: 100%; height: 100% 在滚动后遮罩消失，或只盖住部分区域——大概率是误用了 absolute。
- 务必把遮罩 DOM 直接挂到
document.body下，避开中间容器的transform/filter干扰 - 不要依赖父容器有定位属性，
fixed的包含块是视口，不是某个 div - 若祖先元素设置了
will-change或perspective，也会意外创建新包含块，让fixed失效
inset: 0 和 top/right/bottom/left: 0 怎么选
inset: 0 是语义更清晰、写法更紧凑的等效替代，现代浏览器（Chrome 89+、Firefox 63+、Safari 14.1+）支持良好。但若需兼容 Safari 14.0 或旧版 Android WebView，必须并行写兜底：
.overlay {
position: fixed;
inset: 0;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
}
漏写任意一边（比如只写 top: 0; left: 0）会导致遮罩缩成一个点——这是最常踩的坑。
-
inset不是语法糖，它能防止因 CSS 压缩工具误删某条边而引发的线上事故 - 不用
width: 100vw; height: 100vh：vw/vh 在有横向滚动条时会溢出，iOS Safari 中 vh 还受地址栏影响，导致“漏底” - 生产环境更稳妥的是 JS 动态设
style.height = window.innerHeight + 'px'，并监听resize和orientationchange
背景色必须用 rgba()，别碰 opacity
opacity 是作用于整个元素及其所有后代的，如果遮罩层和弹窗写在一个 DOM 节点里，再设 opacity: 0.5，弹窗里的文字、按钮也会变模糊。而 rgba(0, 0, 0, 0.5) 只影响背景色本身，内容保持清晰。
- 推荐写法：
background-color: rgba(0, 0, 0, 0.5)直接写在遮罩层上 - alpha 值选 0.4–0.6 之间较平衡：太浅压不住底层，太深看不清弹窗内容
- 别用
#000加opacity混搭，逻辑混乱且难维护 - 禁用
background: #0008（八位十六进制）：Safari 当前版本仍不支持，会导致遮罩完全透明
移动端滚动穿透和 iOS 视口抖动怎么防
遮罩层启用时，iOS Safari 仍允许底层页面滚动，本质是 body 滚动未被禁用。仅靠 CSS 不够，必须配合 JS：
- 显示遮罩时：
document.body.style.overflow = 'hidden'，同时加overscroll-behavior: contain防止弹性滚动透出 - 隐藏遮罩后：务必恢复
overflow，否则页面卡死；建议先存原始值：const origin = document.body.style.overflow，关闭时设回 - iOS 地址栏收放导致
100vh突变？改用min-height: 100dvh（Chrome 105+/Safari 16.4+ 支持），或 JS 动态监听更新高度 - 更彻底的锁滚动方案：设
document.body.style.position = 'fixed'并记录window.scrollY，隐藏时还原并window.scrollTo(0, scrollY)
真正上线时最难缠的从来不是尺寸或颜色，而是 transform 创建的新定位上下文、z-index 被层叠上下文隔离、以及 Safari 对 dvh 和 backdrop-filter 的实现差异——这些必须用 DevTools 的“Layers”和“Computed”面板逐层验证，不能只靠样式代码猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
