子元素无法点击？z-index或pointer-events惹的祸

子元素“看得见、点不中，但 hover 能触发”？这往往不是代码逻辑错误，而是 CSS 层叠与交互属性在暗处联手作祟：可能是祖先元素悄悄继承了 `pointer-events: none`，或是 `z-index` 因未定位而彻底失效，又或是 Flex 布局下拉伸、压缩导致点击热区严重偏移，甚至兄弟元素仅凭一个 `opacity: 0.99` 或 `transform` 就悄然创建层叠上下文完成视觉覆盖——更棘手的是，这些问题常多层嵌套、相互掩盖。掌握快速验证方法（如 Computed 面板查 `pointer-events`、`getBoundingClientRect()` 定位真实热区、Layers 面板透视堆叠顺序），才能穿透表象，一击定位真正元凶。

子元素点击失效但鼠标悬停有反应，pointer-events 是第一嫌疑

这种“看得见、点不中、但 hover 样式能触发”的情况，大概率是 pointer-events: none 在作祟。它可能没写在目标元素上，而是从祖先节点继承来的——比如父容器加了半透明遮罩层、弹窗蒙版、或某些 UI 框架的默认禁用逻辑。

快速验证：在开发者工具中选中该子元素，展开 “Computed” 面板，搜索 pointer-events。如果值是 none（哪怕带删除线），就说明被覆盖或继承了。

• 临时在控制台执行 getComputedStyle(document.querySelector('.your-btn')).pointerEvents 确认真实计算值
• 检查所有父级元素，尤其是 position: fixed 或 position: absolute 的遮罩层
• 注意 SVG 元素内部的 或 也可能设了 pointer-events: none

点击区域和视觉位置明显错位，z-index 层级没生效

z-index 只对已定位元素（position 值为 relative、absolute、fixed 或 sticky）起作用。Flex 子元素若没设 position，光写 z-index: 99 完全无效，它仍按 DOM 顺序堆叠。

常见陷阱是：按钮在 Flex 容器里，下方紧挨着一个 position: relative 的区块（如表格容器），后者虽无 z-index，却因定位自动创建新层叠上下文，默认层级高于普通流内元素，结果视觉上按钮在上，实际点击被下面的块截获。

• 给可点击子元素加 position: relative; z-index: 1（必须两者同时存在）
• 避免给父容器设过高 z-index，否则整个子树都被抬升，可能意外盖住其他模块
• 用开发者工具的 “Layers” 面板（Chrome）或 “3D View”（Firefox）直观查看层叠顺序

Flex 子元素尺寸异常导致热区“漂移”

Flex 默认 align-items: stretch，子元素若没设 height 或 min-height，会被拉伸填满交叉轴高度。此时按钮只有一行文字，视觉上很小，但点击热区却是整块高矩形——你点在文字下方大片空白处，事件照样触发；而真正想点的文字边缘，反而可能落在相邻子项的 padding 或 margin 区域里，被判定为“点在空隙中”。

更隐蔽的是 flex-shrink: 1（默认）导致内容被压缩后换行，或 overflow: hidden 裁剪了部分区域，但点击边界仍按原始盒模型计算。

• 对可交互子项显式设 align-self: flex-start 或 min-height: fit-content
• 临时加 outline: 2px solid red 查看真实渲染边界，对比点击位置
• 用 element.getBoundingClientRect() 打印坐标，确认鼠标 clientX/Y 是否真落在 left/right/top/bottom 范围内

兄弟元素视觉覆盖但 DOM 顺序靠后

Flex 不改变 DOM 顺序，但某些样式会让后出现的元素“浮”到前面：比如某兄弟元素用了 transform: translateZ(1px)、will-change: transform，或设置了 opacity < 1，都会触发新层叠上下文，且默认层级高于未触发的元素。

这种情况在移动端尤其难察觉——因为 transform 和 opacity 常用于动画优化，没人会想到它们悄悄改了点击优先级。

• 逐个禁用兄弟元素的 transform、opacity、filter，观察点击是否恢复
• 检查是否有伪元素（如 ::before）设置了 content 和定位，形成隐形遮罩
• 不要依赖“看起来没重叠”做判断，用 getBoundingClientRect() 获取每个元素的真实 top/left/width/height，手动比对坐标范围

真正麻烦的不是单个问题，而是多个因素叠加：比如一个被 align-items: stretch 拉高的按钮，又恰好被某个 opacity: 0.99 的兄弟层叠上下文盖住，而它的父容器还继承了 pointer-events: none —— 这时候只改一个地方根本没用。

到这里，我们也就讲完了《子元素无法点击？z-index或pointer-events惹的祸》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！