模态框遮罩必须用 position: fixed，因其脱离文档流、相对视口定位，滚动时保持覆盖；absolute 会随父容器滚动导致遮罩失效；应使用 top/right/bottom/left: 0 而非 vw/vh，配合 z-index 分层、#0008 半透明色、pointer-events 控制交互，并针对 Safari 视口变化做 min-height 和 -webkit-fill-available 适配。
模态框遮罩为什么必须用 position: fixed
因为只有 fixed 能真正脱离文档流、相对于视口定位，滚动页面时遮罩不跟着动——这是模态框体验的底线。用 absolute 会随父容器滚动，一滚就露底，用户点不到按钮，也挡不住背后操作。
常见错误现象：overflow: hidden 加在 body 上但遮罩仍偏移；或者遮罩只盖住部分区域，尤其在 Safari 下高度计算异常。
-
top: 0; right: 0; bottom: 0; left: 0比width: 100vw; height: 100vh更可靠（后者在滚动条存在时可能溢出或留白） - 必须设
z-index，且值要高于模态框主体（比如遮罩z-index: 1000，内容层z-index: 1001） - 避免给遮罩加
transform或will-change，某些旧版 Chrome 会触发渲染 bug，导致半透明失效
background-color 半透明怎么选才不出错
别用 rgba(0,0,0,0.5) 硬写——它在暗色模式下可能和背景融合，用户根本看不出遮罩已激活。更稳妥的是用 hsla 或直接 background-color: #0008（八位十六进制，后两位是 alpha）。
兼容性注意：IE11 不支持八位 hex，如果还要兼容，得回退到 rgba + 单独写 filter: alpha(opacity=50)，但现代项目基本可忽略。
立即学习“前端免费学习笔记（深入）”；
-
#0008和rgba(0,0,0,0.314)视觉上几乎一样，但前者更简洁、无小数精度问题 - 别用
opacity: 0.5，它会让子元素（比如模态框内容）也变透明，逻辑上不合理 - 如果遮罩下有视频或 canvas，半透明叠加可能导致性能掉帧，可加
backface-visibility: hidden强制 GPU 加速
遮罩点击关闭功能的 CSS 边界陷阱
很多人以为给遮罩加 cursor: pointer 就能点，结果发现点不生效——其实是遮罩没“内容”，浏览器默认不触发 click 事件。必须确保它有可交互面积，且没有被 pointer-events: none 意外屏蔽。
使用场景：点击遮罩关闭弹窗，但不能误关模态框内的表单下拉、日期选择器等嵌套控件。
- 遮罩本身设
pointer-events: auto（显式声明，防止继承父级none） - 模态框内容层需设
pointer-events: auto，否则内部按钮也点不了 - 若用
pointer-events: none做“穿透”效果（比如只关遮罩不关内容），务必确认内容层z-index高于遮罩，否则点击会直接落到背后页面
移动端 Safari 的全屏遮罩高度 bug 怎么绕
Safari 在地址栏收起/展开时会重算 vh，但 fixed 元素不会自动重绘，导致遮罩顶部或底部漏白。这不是 CSS 写错了，是浏览器行为。
最轻量的解法不是 JS 监听 resize，而是用 min-height: 100%; + height: 100vh 双保险，再配合 overflow: hidden 防止内容撑高。
- 遮罩容器加
min-height: 100%; height: -webkit-fill-available;（Safari 专用） - 避免在遮罩上设
font-size或其他触发重排的属性，减少重绘抖动 - 真要 JS 补救时，只在
orientationchange或scroll后极短延时（setTimeout(..., 16)）强制重设高度，别用resize
