z-index: -1 的元素无法点击，因为它被强制置于当前堆叠上下文的背景和边框之下，天然不接收鼠标事件；即使父容器 z-index 很高、元素可见或开发者工具显示“在上”，其事件捕获能力仍被彻底剥夺。
z-index: -1 的元素为什么点不了
因为 z-index: -1 不只是让元素“往后退”，而是把它压到了**当前堆叠上下文的背景和边框之下**——这个位置天然不接收鼠标事件。不是浏览器 bug，是 CSS 层叠规则强制规定的渲染顺序。
常见现象包括：元素可见（或部分可见），但 hover 不触发、click 完全无响应、滚动条点击失效、输入框无法聚焦。
- 即使父容器
z-index: 9999，也救不回z-index: -1的子元素 —— 它已被锁死在背景层 - 父容器设了
background-color或background-image，该元素就彻底不可见 + 不可点 - 父容器没背景但有
border，元素会显示在 border 下方，可能被裁掉或拦截事件 - 整个子树都失效：只要父级是
z-index: -1，其所有后代（无论自己设多高的z-index）都会失去事件捕获能力
为什么开发者工具里看着“在上面”却点不到
浏览器开发者工具的“Elements”面板只显示 DOM 结构和样式，不反映真实层叠顺序。真正决定是否能接收鼠标事件的，是元素在**当前堆叠上下文中的实际绘制层级**。
关键检查点：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Rendering → 勾选
Show stacking order，看目标元素是否被标为 “background” 或 “border” 层级 - 在
Computed面板确认position不是static（否则z-index根本不参与计算） - 逐级向上检查祖先节点的
Computed样式，搜transform、opacity、filter、will-change—— 任一满足都会创建新堆叠上下文，把z-index: -1锁死在局部
修复方式不是调高 z-index，而是绕开负值陷阱
z-index: -1 的设计意图从来不是“让元素可交互地藏在后面”，而是视觉降级（比如做文字背景）。想实现“底层可点”，得换思路。
- 把目标元素的
z-index改成0或删掉（保留position: relative/absolute即可） - 用
pointer-events: none让上层遮罩“透明化”，而不是把下层压到背景里（注意 IE11 不支持） - 结构上移：把需要点击的元素挂到
body下，脱离原父容器的堆叠上下文约束 - 避免用负 margin +
z-index: -1组合模拟“穿透”——负 margin 只影响布局流，不改变层叠顺序，依然点不到
最容易被忽略的细节
很多人以为只要“没写 pointer-events: none”，元素就一定可点。但 z-index: -1 是更底层的剥夺：它让元素连事件捕获阶段都进不去，浏览器压根不会把鼠标事件派发给它。调试时别只盯着 pointer-events，先确认它是否还在“可交互层”的范围内。
