全屏遮罩层必须用 position: fixed，因其始终锚定视口左上角、不随滚动偏移且不受父容器 overflow 或 transform 限制；若用 absolute 则依赖定位祖先，易被截断或错位，须配合 top/right/bottom/left: 0 及 rgba 背景确保完整覆盖与内容清晰。
全屏遮罩层必须用 position: fixed，否则滚动时会移位、父容器有 overflow 时会被截断；背景必须用 rgba()，而不是 opacity 或十六进制色值，否则弹窗内容也会变透明或完全不可见。
为什么 position: fixed 不可替代
遮罩要盖住整个可视区域，且不随页面滚动偏移。position: absolute 会相对于最近的定位祖先（比如某个 div）计算位置，一旦该祖先设置了 overflow: hidden 或高度不足，遮罩就“被框住”，露出底下的内容。而 fixed 始终锚定在视口左上角，不受文档流和父容器限制。
常见错误现象：top: 0; left: 0; width: 100%; height: 100% 在滚动后遮罩消失，或只盖住部分区域——大概率是误用了 absolute。
- 务必写
top: 0; right: 0; bottom: 0; left: 0，比width: 100vw; height: 100vh更可靠（vh在 iOS Safari 中受地址栏影响，常导致“漏底”） - 移动端更稳妥的做法：用 JS 动态设
style.height = window.innerHeight + 'px'，并监听resize - 避免给遮罩或其父容器加
transform、filter、will-change，否则会意外创建层叠上下文，让z-index失效
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混搭，逻辑混乱且难维护 - 如需兼容老 IE（极少见），可用
filter: alpha(opacity=50)，但现代项目无需考虑
点击遮罩关闭弹窗却误关弹窗内容？事件冒泡没拦住
直接监听遮罩的 click 事件并执行关闭逻辑，会导致点击弹窗内部任意位置也触发关闭——因为事件会从子元素向上冒泡到遮罩层。
- 安全做法：在遮罩的 click 回调中检查
event.target === event.currentTarget，确保只响应遮罩本体点击 - 更彻底：给弹窗内容容器加
pointer-events: auto（默认已是），并在其上绑定click并调用e.stopPropagation() - 别用内联
onclick="closeModal()"，尤其在 React/Vue 中会破坏状态同步
iOS Safari 滚动穿透与高度错乱怎么破
iOS Safari 下，遮罩开着时用户仍能拖拽背景页滚动，且 100vh 经常算不准高度（地址栏收起/展开导致视口变化），这是纯 CSS 无法根治的问题。
- 防滚动穿透：打开遮罩时，给
加style="position: fixed; top: -${scrollY}px; width: 100%;"，关闭时恢复并window.scrollTo(0, savedScrollY) - 防高度错乱：放弃
100vh，用 JS 初始化并监听resize更新遮罩height - 微信/QQ 内置 WebView 中，
window.innerHeight可能返回 iframe 容器高度而非真实屏幕尺寸，需 fallback 到document.documentElement.clientHeight
真正可靠的遮罩不是靠一个 CSS 属性堆出来，而是 fixed 定位 + rgba 背景 + JS 动态高度 + body 滚动锁定这四者缺一不可；最容易被忽略的是 iOS 下的 resize 监听和 scrollY 同步，不处理它们，遮罩在真机上大概率出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
