全屏蒙层必须用 position: fixed 而非 absolute，因后者随滚动偏移；应四边设 0 撑满视口，配高 z-index、rgba 背景色、pointer-events 控制点击，并加 transform: translateZ(0) 优化 iOS 渲染。
全屏蒙层为什么不能用 position: absolute
因为 absolute 是相对于最近的定位祖先元素（position 为 relative、absolute 或 fixed）计算位置的；如果祖先没设定位，它就相对 body 或 html，但滚动时会随内容移动，蒙层就“掉下去”了。真正要盖住整个视口、不随滚动偏移，必须用 position: fixed。
常见错误现象：overflow-y: scroll 的页面里，蒙层只覆盖初始可视区，一滚就露出底下的内容。
-
top: 0; right: 0; bottom: 0; left: 0;四边撑满，比width: 100vw; height: 100vh;更可靠（后者在某些移动端或有横向滚动条时会溢出） - 必须加
z-index，且值要高于所有其他内容；建议设为9999或至少比主内容高 2 层以上 - 避免给父容器加
transform、filter或will-change—— 这些会创建新的层叠上下文，导致z-index失效
背景色蒙层要不要加 background-color？
要，而且必须显式声明。即使只想要半透效果，也不能只靠 opacity：因为 opacity 会让子元素（比如弹窗）也变透明，而蒙层通常需要「遮挡底层但不模糊上层内容」。
正确做法是用带 alpha 的颜色值，比如 rgba(0, 0, 0, 0.5) 或 hsla(0, 0%, 0%, 0.5)，而不是 opacity: 0.5。
立即学习“前端免费学习笔记（深入）”；
-
rgba()兼容性好（IE9+），hsla()更适合动态调色，但注意 Safari 旧版本对hsla在fixed元素中偶有渲染异常 - 别用
background: #0008（八位十六进制）—— Chrome 和 Firefox 支持，但 Safari 目前（v17）仍不支持，会导致蒙层完全透明 - 如果需要动画淡入，优先对
background-color做 CSS transition，而非opacity，避免子元素被连带影响
蒙层点击穿透问题怎么防
用户点蒙层本意是关闭弹窗，但如果蒙层上没有交互逻辑，又没阻止默认行为，可能误触到底下按钮或链接。
最直接的解法是加 pointer-events: none，但要注意：这会让整个蒙层无法响应任何事件，包括你后续想加的点击关闭逻辑。
- 如果蒙层只是视觉遮罩、无交互，就加
pointer-events: none，再把关闭逻辑绑定到弹窗右上角 × 或 ESC 键 - 如果要点蒙层关闭，必须用
pointer-events: auto（默认值），并确保它在 DOM 中位于弹窗之下（靠z-index控制层级） - 别忘了在 JS 中监听蒙层
click时，检查event.target === event.currentTarget，防止点到弹窗内部时误关闭
移动端全屏蒙层的兼容细节
iOS Safari 对 fixed 元素在滚动时有重绘延迟，尤其在快速滚动后，蒙层可能出现“闪一下”或短暂错位。
这不是 bug，是 Safari 的渲染优化策略，但用户感知明显。关键不是禁用优化，而是绕过触发条件。
- 给蒙层加
transform: translateZ(0)或will-change: transform，可强制启用硬件加速，缓解重绘卡顿 - 避免同时设置
height: 100vh和position: fixed：Safari 在地址栏收起/展开时会重算vh，导致蒙层高度跳变；坚持用top/bottom/left/right: 0 - 如果页面用了
viewport的user-scalable=no，部分安卓 WebView 会忽略fixed定位，此时需 fallback 到 JS 动态监听scroll并更新top值（但仅限兜底，性能差）
