z-index: -1 的元素“消失”是因为被严格绘制在直接父容器的 background-color 和 background-image 之下，这是 css 层叠顺序的硬性规则；父元素设 background 就必然不可见，非 bug；它还导致鼠标事件失效，修复方式是将 z-index 改为 0 或删除。
z-index: -1 的元素“消失”了，先检查父元素有没有 background
这不是 bug，是 CSS 层叠顺序的硬性规则：z-index: -1 的元素一定绘制在**直接父容器的 background-color 和 background-image 之下**。哪怕父容器 z-index: 9999，也救不回来。
- 父元素设置了
background或background-image→ 元素必然不可见（最常见原因） - 父元素没设 background，但有
border→ 元素会显示在 border 下方，可能被遮挡 - 父元素本身没创建堆叠上下文（比如没设
position、opacity、transform等），那z-index: -1才真正生效于根层叠上下文
滚动条点击/滚轮失效，很可能是 z-index: -1 拦截了鼠标事件
z-index: -1 不仅影响视觉，更会把元素压到可交互层之下 —— 滚动条可见，但点不动、滚不了。
- 容器本身设了
overflow-y: scroll但无法滚动？先看它或它的父级是否用了z-index: -1 - 即使子元素
z-index: 999，只要父容器z-index: -1，整个子树都会被压到底层，失去事件捕获能力 - 修复方式很简单：把该容器的
z-index改成0或直接删掉（position: relative可保留，z-index不必配）
同级元素间用 z-index: -1 做“下沉”，必须确保无共同带背景的父容器
想让 A 在 B 背景之下，又不想让它沉进自己父容器的背景里？只能靠 DOM 结构和层级隔离。
- A 和 B 必须是**同级定位元素**（都设
position: relative或absolute） - A 设
z-index: -1，B 设z-index: 0且带background→ A 显示在 B 背景下，但仍在页面背景上 - 如果 A 和 B 共享一个带
background的父容器，A 就会被盖住 —— 此时应把 A 提到更高一级公共父级下 - 更稳妥的做法：用
::before伪元素承载底层装饰，主内容保持z-index: auto
替代 z-index: -1 的三种更可控方案
除非明确需要“沉入背景”的语义，否则尽量避开 z-index: -1。它太容易误伤交互和可见性。
- 用
isolation: isolate主动创建独立堆叠上下文，内部再用正数z-index控制，逻辑清晰、行为可预测 - 把需底层显示的内容提到与遮罩层同级的 DOM 位置，避免嵌套干扰
- 对装饰性内容，优先用
::before或::after+z-index: -1，并确保宿主元素无background
负 z-index 不是“安全最低值”，而是明确要求“画在背景之下”。它不提供容错，只执行规范。实际布局中，多数所谓“底层需求”其实更适合用结构或伪元素解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
