遮罩层不显示需先设position再设z-index；点击穿透用pointer-events: none或auto；全屏遮罩用fixed防滚动错位；毛玻璃效果用backdrop-filter但兼容性差。
遮罩层不显示？先检查 position 和 z-index 是否同时生效
遮罩层（overlay）本质是覆盖在目标元素之上的另一个元素，它不会自动“浮起来”——z-index 只对已定位元素（position 值为 relative、absolute、fixed 或 sticky）起作用。常见错误是只设 z-index，但忘了加 position。
- 必须给遮罩层设置
position: absolute（最常用）或fixed（全屏遮罩） - 父容器最好设
position: relative，否则absolute遮罩层会相对于最近已定位祖先定位，可能飘到页面外 -
z-index数值需比被遮盖内容高；若父级有z-index且值较小，子级再大也无效（层叠上下文限制）
遮罩层点击穿透？用 pointer-events 控制交互行为
默认遮罩层会拦截所有鼠标事件，但有时你只想遮视觉、不挡操作（比如做半透明高亮提示），或者反过来——需要遮罩层响应点击但不透出底层按钮。
- 让遮罩层“透明可点击”：加
pointer-events: none，此时鼠标事件直接穿过它落到下层 - 让遮罩层“仅响应点击”：保留
pointer-events: auto（默认），再配合background-color: rgba(0,0,0,0.5)实现视觉遮盖+交互捕获 - 注意：
pointer-events: none会禁用所有事件，包括hover和focus，别用在需要悬停反馈的遮罩上
全屏遮罩滚动时错位？优先选 position: fixed 而非 absolute
当页面内容高度超过视口、需要滚动时，position: absolute 的遮罩层会随文档流滚动而移位，导致遮不住目标区域；fixed 则始终锚定视口，更可靠。
- 全屏遮罩（如模态框背景）应使用
position: fixed，并设top: 0; left: 0; width: 100vw; height: 100vh - 避免用
100%宽高，因为%是相对父容器计算，而fixed元素的父容器是视口，vw/vh更准确 - 如果遮罩要随某个模块滚动（如表格行内操作浮层），才用
absolute，并确保其父容器有position: relative且高度足够
遮罩层边缘漏光？background 和 backdrop-filter 的兼容性取舍
纯黑半透明遮罩（background: rgba(0,0,0,0.7)）最稳妥；但想加毛玻璃效果就得用 backdrop-filter: blur(4px)，这时老浏览器（如 Chrome
立即学习“前端免费学习笔记（深入）”；
- 安全写法：先写
background: rgba(0,0,0,0.7)，再叠加backdrop-filter，降级时至少保底遮盖 - 不要依赖
backdrop-filter做核心遮蔽功能，它只是视觉增强 - Safari 对
backdrop-filter支持较好，但开启硬件加速后偶有渲染闪烁，可加transform: translateZ(0)缓解
position 和 z-index 实际生效值，比反复调数字更省时间。 
