z-index: -1 的元素被渲染在根元素背景之下，不参与事件捕获路径，因此无法响应点击、hover、滚轮等交互事件，即使视觉可见。
z-index: -1 的元素根本不在事件捕获路径上，浏览器直接跳过它——不是“点不中”，而是“压根看不见你”。
z-index 负值会让元素沉到根层背景之下
当一个元素设置了 z-index: -1 且 position 为 relative、absolute 或 fixed，它会被渲染在根堆叠上下文（即 或 ）的背景和边框之下。这意味着：
- 鼠标滚轮、点击、拖拽等事件完全不会触发到它
- 即使它视觉上可见（比如有背景色或图片），
hover也不会生效 - 开发者工具里右键“检查”时，高亮框会跳到它下方的
body或其他容器上 - 它不响应
tabindex，也无法被键盘焦点捕获
为什么 z-index: -1 不等于 “层级低一点”？
负值不是简单排序靠后，而是主动把自己“降级”到父上下文的底层区域。根据 CSS 堆叠顺序规则，z-index: -1 的元素排在：
- 根元素的背景和边框之后
- 所有正常流块级元素、浮动元素、inline 元素之前
- 但关键在于：它已脱离用户交互层（user interaction layer）
换句话说，z-index: -1 的元素仍参与渲染，但浏览器在事件分发阶段就把它过滤掉了——就像 DOM 树还在，但事件系统已经“失联”。
常见误用场景与修复方式
典型错误是想做“背景图层”而写：
.bg-layer {
position: absolute;
z-index: -1;
background: url(...) center/cover;
}
这会导致该层无法作为可点击链接或热区使用。正确做法包括：
- 改用
z-index: 0或省略z-index（保持position: relative即可参与默认堆叠） - 若必须视觉置底，把目标元素提到
body直接子级，并确保其父容器没创建新层叠上下文 - 避免在父级上加
opacity 、<code>transform或filter，否则子元素即使设了z-index: -1也进不了根层 - 别指望
pointer-events: auto能救回来——它只对已进入事件流的元素生效，而z-index: -1的元素连事件流都没进
真正难调试的，是那个看似无关的 opacity: 0.99 父容器，它一边悄悄创建层叠上下文，一边把子元素的 z-index: -1 锁死在无效范围里——这种组合最容易让人反复修改数字却毫无反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
