用 position: fixed 而不是 absolute 或 relative，因为遮罩必须覆盖整个可视区域且不随滚动偏移；absolute 受定位祖先约束易漏白错位，relative 不脱离文档流无法覆盖；只有 fixed 始终相对视口，天然满足全屏防滚动需求。
为什么用 position: fixed 而不是 absolute 或 relative
因为遮罩必须覆盖整个可视区域，且不随页面滚动偏移。absolute 会受最近定位祖先约束——如果父容器高度不足、有 overflow: hidden 或设置了 transform，遮罩就漏白或错位；relative 根本不脱离文档流，连“覆盖”都做不到。只有 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）会导致遮罩缩成一个点——这是最常踩的坑。
移动端滚动穿透和 iOS 视口抖动怎么防
遮罩层启用时，iOS Safari 仍允许底层页面滚动，本质是 body 滚动未被禁用。仅靠 CSS 不够，必须配合 JS：
- 显示遮罩时：
document.body.style.overflow = 'hidden'，同时加overscroll-behavior: contain防止弹性滚动透出 - 隐藏遮罩后：务必恢复
overflow，否则页面卡死 - 地址栏收放导致
100vh突变？改用min-height: 100dvh（Chrome 105+/Safari 16.4+ 支持），或 JS 动态监听resize和orientationchange更新高度
遮罩层内容居中为何不能只靠 margin: auto
margin: auto 在 fixed 容器里对垂直方向无效，且依赖父容器明确宽高。正确做法是直接在遮罩层上设：
.overlay {
display: flex;
justify-content: center;
align-items: center;
}
这样子元素（如弹窗、加载图标）才能真正居中；若遮罩内还有 position: absolute 元素，它的定位参考仍是视口而非遮罩内部——这点容易误判为 bug。
真正上线时最难缠的从来不是尺寸或颜色，而是 transform 创建的新定位上下文、z-index 被层叠上下文隔离、以及 Safari 对 dvh 和 backdrop-filter 的实现差异——这些必须用 DevTools 的 “Layers” 和 “Computed” 面板逐层验证，不能只靠样式代码猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
