遮罩层内按钮点不了，大概率是中间某层容器未显式设pointer-events: auto，导致事件在该层被截断；必须为每一层包裹可交互元素的容器显式声明该属性，避免依赖默认值或受层叠上下文干扰。
遮罩层里按钮点不了，大概率是 pointer-events 断在中间某一层
遮罩层内嵌了多层结构（比如 .overlay > .menu-panel > .submenu > .close-btn），只要中间任意一层没显式设 pointer-events: auto，事件就会在那层被截断——哪怕最外层和按钮本身都设对了也没用。
常见错误写法：.overlay { pointer-events: auto; } + .close-btn { pointer-events: auto; }，但漏掉了 .menu-panel 和 .submenu。它们默认继承父级的 pointer-events 值，而如果父层是 auto，子层仍可能因层叠上下文或隐式样式被干扰。
- 必须给**每一层容器**（只要它包裹可交互元素）显式声明
pointer-events: auto - 避免依赖“默认值”，尤其当父层用了
transform、opacity或filter——这些会创建新层叠上下文，导致pointer-events行为不可预测 - 调试时临时加
outline: 1px solid red到各层，确认 DOM 结构和层级是否如预期
z-index 不生效？先查共同祖先有没有隐式层叠上下文
遮罩层明明写了 z-index: 9999，却盖不住下层菜单，问题往往不在遮罩本身，而在它和目标菜单的最近共同父容器上。
这个父容器如果设置了 transform、opacity: 0.99、filter: blur(1px) 等属性，就会隐式创建一个新层叠上下文——此时遮罩和菜单的 z-index 只在各自内部比较，彼此之间根本没法比高低。
立即学习“前端免费学习笔记（深入）”；
- 临时验证：给疑似父容器加
transform: none !important，看遮罩是否立刻“浮现” - 根治方案：把遮罩 DOM 节点直接挂到
document.body下，绕开深层嵌套结构 - 若必须保留在原位置，就确保共同祖先不触发新层叠上下文；改用
background: rgba(0,0,0,0.6)替代opacity控制透明度
移动端点击穿透：touchend 必须同步隐藏遮罩，不能只靠 pointer-events
在 iOS 或 Android 上，点遮罩关闭菜单后，底层按钮被意外触发——这不是 CSS 没设好，而是浏览器 300ms click 延迟机制在作祟：touchend 执行完、遮罩 DOM 移除，300ms 后系统仍会派发一次 click，落到原来位置的底层元素上。
pointer-events: none 在这里无效，因为它只影响鼠标事件路径，不干预 touch/click 的时间错位。
- 关闭操作必须监听
touchend（不是click），并在回调里同步执行 DOM 隐藏/移除 - 如果要兼容 PC，得同时绑定
click和touchend，或用if ('ontouchstart' in window)分支判断 - 别在
touchend里只调e.preventDefault()就完事——必须真正移除遮罩，否则 click 还是会穿透
局部遮罩用 absolute，但父容器没设 relative 就全乱套
想只盖住某个菜单区域，用了 position: absolute，结果遮罩飘到页面左上角或者完全错位——基本可以确定是父容器没设 position: relative。
absolute 定位是相对于**最近的已定位祖先**（即 position 为 relative、absolute 或 fixed 的父元素），而不是 DOM 树上的直接父级。如果一路往上都没找到，就会相对于 body 定位。
- 给遮罩的直接父容器加
position: relative，这是硬性前提 - 遮罩自身建议写死四边：
top: 0; right: 0; bottom: 0; left: 0，比只靠width: 100%; height: 100%更稳 - 别混用
absolute遮罩 +fixed弹窗，后者会脱离遮罩控制范围，滚动时错位
