用 position: fixed 覆盖全屏最稳妥，设 top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999；避免 overflow: hidden；遮罩层 click 只关闭自身；iOS 需加 backface-visibility: hidden 和 -webkit-backdrop-filter；动画优选 opacity + visibility 切换。
遮罩层怎么写才能不破坏页面滚动
直接用 position: fixed 覆盖全屏是最常用也最稳妥的方式。如果用 position: absolute，一旦父容器有 transform 或 perspective，遮罩层就可能错位或缩放；用 position: relative 更不行，它根本不会脱离文档流。
关键点：
-
top: 0; left: 0; width: 100vw; height: 100vh;比width: 100%; height: 100%;更可靠，后者依赖父元素高度，容易失效 - 必须加
z-index，且值要高于页面所有其他内容（比如设为9999） - 遮罩层默认会挡住滚动事件，但页面主体仍可滚动——这正是我们想要的；若误加
overflow: hidden到body，反而会让页面卡死
点击遮罩层关闭时如何避免误触底层元素
遮罩层本身不该触发任何业务逻辑，只负责“收掉自己”。常见错误是给遮罩层绑了 click 事件，结果用户点到按钮上，遮罩层和按钮同时响应，造成重复提交或状态混乱。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层的
click回调里只执行关闭逻辑（比如element.remove()或classList.remove('show')） - 确保遮罩层
div没有子元素，或子元素明确设pointer-events: none - 如果遮罩层内要放弹窗内容，弹窗容器需单独设置
pointer-events: auto，否则按钮无法点击
兼容 iOS Safari 的透明遮罩为什么有时失效
iOS Safari 对 background-color: rgba(0,0,0,0.5) 渲染正常，但若遮罩层含文字或伪元素，且未显式声明 -webkit-backface-visibility: hidden，可能出现闪烁或半透明失效。
实操建议：
- 加上
backface-visibility: hidden和transform: translateZ(0)强制 GPU 加速 - 避免在遮罩层上使用
background: radial-gradient等复杂渐变，iOS 旧版本渲染不稳定 - 如果遮罩层需要模糊背景（
backdrop-filter: blur(4px)），务必加-webkit-backdrop-filter前缀，且注意 iOS 13+ 才支持
用 JavaScript 控制显示/隐藏时的性能陷阱
频繁切换 display: none / block 会触发重排（reflow），尤其在遮罩层含大量子节点时卡顿明显。更轻量的做法是用 visibility: hidden + opacity: 0 配合 transition。
推荐方案：
- 初始状态设
opacity: 0; visibility: hidden; pointer-events: none; - 显示时只改
opacity: 1; visibility: visible; pointer-events: auto; - 过渡动画用
transition: opacity 0.2s ease，不加visibility动画（它不可过渡） - 若需完全移除 DOM，等动画结束后再调用
remove()，避免 DOM 操作打断渲染帧
