遮罩层用 position: fixed 还是 absolute 取决于是否随滚动消失：全屏遮罩用 fixed，局部容器内遮罩用 absolute 且父级需 relative；须设 z-index、rgba 背景、四边定位；pointer-events 控制事件穿透，按钮需单独设 auto。
遮罩层用 position: fixed 还是 position: absolute？
取决于遮罩是否要随滚动消失。如果希望遮罩始终盖住整个视口（比如弹窗、加载中提示），必须用 position: fixed；若只盖住某个相对定位的容器内部（如卡片内的操作遮罩），才用 position: absolute，且父容器需设 position: relative。
常见错误：直接给遮罩加 position: absolute 但没管父级定位，结果遮罩飘到页面左上角或完全错位。
-
z-index必须显式设置，且值要高于被遮盖内容（通常设9999或1000起） - 遮罩背景推荐用半透黑：
background: rgba(0, 0, 0, 0.6)，别用opacity，否则会把子元素也变透明 - 记得加
top: 0; right: 0; bottom: 0; left: 0;填满视口（fixed下）
遮罩层里放按钮/表单，点击失效怎么办？
本质是遮罩层“吃掉”了所有鼠标事件。解决方法不是删遮罩，而是控制 pointer-events：
- 默认遮罩设
pointer-events: auto（或不设，默认就是） - 如果遮罩只是视觉覆盖、不拦截交互，就设
pointer-events: none - 但如果遮罩内有关闭按钮，就得让按钮区域重新可点：给按钮单独设
pointer-events: auto
示例结构：
立即学习“前端免费学习笔记（深入）”；
CSS 中：.overlay { pointer-events: auto; }，.close-btn { pointer-events: auto; } —— 按钮能点，其余区域仍拦截点击。
backdrop-Filter 做毛玻璃效果，为什么在 safari 上不生效？
因为 Safari 对 backdrop-filter 有严格限制：父元素不能有 overflow: hidden 或 transform（哪怕只是 transform: translateZ(0)），否则直接禁用该效果。
- 检查遮罩父容器是否意外加了
overflow: hidden（常见于轮播、卡片裁剪） - 避免对遮罩本身或其任意祖先加
transform、will-change等触发合成层的属性 - 兼容写法：先加
backdrop-filter: blur(6px)，再加-webkit-backdrop-filter: blur(6px) - 真不行就降级为纯色半透，别硬撑毛玻璃
移动端点击穿透（click-through）怎么防？
遮罩层关闭后，底层元素被误触，多见于 ios Safari。根本原因是遮罩移除瞬间，系统把“抬起手指”的动作映射到了下方元素上。
- 遮罩关闭时，给
加pointer-events: none，延时300ms后再移除 - 或者更稳妥：遮罩 dom 移除前，先用
setTimeout(() => { /* 移除遮罩 */ }, 0)把操作推到下一轮事件循环 - 别依赖
touchstart+preventDefault()，iOS 15+ 已限制其对非可滚动区域的拦截能力
这个延迟和事件循环细节，恰恰是多数人调试时反复踩坑却查不到原因的地方。