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 很高。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 这不是定位失效，是渲染被截断；检查父容器的 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 却不处理任何逻辑——它成了“透明陷阱”，既不响应也不放行

事情说清了就结束。真正卡住的，往往不是 CSS 属性不会写，而是浏览器按规范一层层计算层叠、裁剪和事件流，而人只盯着自己改的那一行。