pointer-events: none 使元素不响应鼠标事件但允许穿透，仅作用于自身且ie11以下不支持；z-index失效多因父级创建层叠上下文；overflow: hidden会裁剪absolute元素；事件委托中应使用closest查找真实目标。
pointer-events: none 会阻止所有鼠标事件，但可以分层穿透
当上层元素遮挡了下层可点击区域，比如悬浮菜单盖住了按钮、伪元素遮住了输入框，pointer-events: none 是最直接的穿透方案。但它不是“让下层变可点”，而是“让本层彻底不响应鼠标”——这点常被误解。
- 只对设置该样式的元素本身生效，不影响子元素（除非子元素也显式设为
pointer-events: auto） - 若上层是带透明背景的
div或::before，且你希望它视觉存在但不妨碍点击，就该用pointer-events: none - 但若上层需要响应 hover 或 click（比如 tooltip 要显示/隐藏），就不能全局设
pointer-events: none，得改用pointer-events: auto+ 精确控制触发区域 - IE11 及更早版本不支持
pointer-events，如需兼容，得用 JS 模拟穿透或重排 DOM 层级
z-index 失效？检查父容器是否创建了新的层叠上下文
z-index 不起作用，十有八九不是值设小了，而是父级用了 transform、opacity、filter 或 will-change，悄悄创建了新层叠上下文，把子元素的 z-index 锁死在局部范围内。
- 用浏览器开发者工具的“Layers”面板或“Computed”标签页，看目标元素的
z-index是否被标记为“not applicable” - 检查最近的非
static定位父级，再往上查它的任意祖先是否含transform: translateZ(0)、opacity: 0.99等触发层叠上下文的属性 - 修复方式不是硬调
z-index，而是要么移除触发属性，要么把需要置顶的元素提升到同一层叠上下文层级（例如提到 body 下）
position: absolute 元素被裁剪？overflow: hidden 是元凶
绝对定位元素超出父容器却看不见，常见原因是父级设置了 overflow: hidden 或 overflow: auto，而没意识到它会裁剪 position: absolute 的后代——哪怕那个后代的 z-index 很高。
- 这不是定位失效，是渲染被截断；检查父容器的
overflow值，临时改成visible就能验证 - 如果必须保留滚动或裁剪，又想让某个绝对定位元素“逃出来”，有两个稳妥办法：把该元素移到父容器外部 DOM 中（如挂到
body），或用transform: translateZ(0)强制创建新层叠上下文并脱离父级 overflow 约束（注意性能影响） - 慎用
clip-path替代overflow，它同样会裁剪绝对定位内容，且调试更不直观
事件监听器绑在父元素，但 event.target 是遮罩层而非真实目标
用事件委托时，event.target 经常返回遮罩层（比如半透明 div.overlay），而不是底下真正的按钮或链接。这不是事件没冒泡，而是冒泡路径上的节点“抢答”了。
立即学习“前端免费学习笔记（深入）”；
- 优先检查遮罩层是否意外绑了空 handler（比如
onclick="void 0"或空addEventListener），它会阻止默认行为或干扰冒泡判断 - 用
event.composedPath()查看完整冒泡路径，确认真实目标是否在其中；若不在，说明中间某层调用了stopPropagation() - 更健壮的做法是用
event.target.closest('button, a')向上查找语义目标，而不是依赖event.target本身 - 避免在遮罩层上设
pointer-events: auto却不处理任何逻辑——它成了“透明陷阱”，既不响应也不放行
