遮罩层背景色应使用 background-color: rgba() 而非 opacity，避免点击穿透失效；必须设置 position（如 fixed/absolute）和 z-index 才能正确叠层；显示时需 document.body.style.overflow = 'hidden' 并还原；backdrop-filter 模糊需注意兼容性与性能降级。
遮罩层背景色透明但点击穿透？用 background-color: rgba() 别用 opacity
遮罩层点不了底下的按钮，或者点了没反应——大概率是用了 opacity 控制透明度。它会让整个元素（包括子节点）一起变透明、一起降低交互权重，导致点击事件被“吃掉”。background-color: rgba(0, 0, 0, 0.5) 才是正解：只影响背景，不干扰层级和事件流。
-
rgba()的第四个参数是 alpha 值，范围0（全透）到1（不透），常用0.4~0.7 - 别写成
background: rgba(...) transparent或混用background-color和background，后者会覆盖前者 - 如果遮罩层里要放文字或按钮，确保它们的
color或background-color没被意外继承或重置
遮罩层盖不住弹窗？检查 z-index 是否真的生效
z-index 不是写了就起作用。它只对「定位元素」（position 为 relative、absolute、fixed 或 sticky）有效。静态元素（position: static，默认值）写再多 z-index 都是摆设。
- 遮罩层必须设
position: fixed（全屏）或position: absolute（相对父容器），再配z-index: 999类似值 - 被遮盖的弹窗也要有定位属性，且
z-index值必须严格小于遮罩层（比如遮罩用1000，弹窗最多999） - 注意层叠上下文（stacking context）：父容器若设了
transform、filter或will-change，可能截断子元素的z-index比较范围
移动端遮罩层滚动穿透？加 overflow: hidden 到 body 但别漏还原
在 iOS 或部分安卓上，遮罩层弹出后还能滑动背后页面——这是因为 body 默认可滚动，遮罩层只是盖在上面，并没锁住底层。
- 显示遮罩时，执行
document.body.style.overflow = 'hidden' - 隐藏遮罩后，必须恢复：比如存原始值
const origin = document.body.style.overflow，关闭时设回origin；直接设'auto'可能失效（因 CSS 里写了overflow: hidden） - 慎用
position: fixed+top: 0遮罩来“撑满”，它在某些微信 WebView 中仍可能漏滚动，优先用height: 100vh+width: 100vw
backdrop-filter 做毛玻璃效果？先看兼容性和性能代价
想让遮罩层后面的内容模糊（比如半透+高斯模糊），backdrop-filter: blur(4px) 看起来很美，但实际落地要小心。
立即学习“前端免费学习笔记（深入）”；
- Chrome/Edge 100+、Safari 15.4+ 支持，Firefox 仍需前缀
-webkit-backdrop-filter且默认禁用（用户需手动开启） - iOS Safari 上开启模糊后，页面滚动可能卡顿，尤其内容复杂时；建议加
will-change: filter提前提示渲染引擎 - 模糊区域如果包含视频或 canvas，部分安卓机型会直接不渲染模糊效果，降级方案仍是纯
rgba()背景
position 属性是否真生效、body 滚动锁是否双向还原、以及 backdrop-filter 在低端机上的静默失败。 
