z-index: -1 的元素始终渲染在父元素 background 之下，这是 css 层叠顺序规范定义的行为，不可通过提升父级 z-index 改变；其可见性取决于直接父容器是否设置背景。
z-index: -1 的元素不是“消失”，而是被画在父元素的 background 之下 —— 这是 CSS 层叠顺序的硬性规则，不是 bug，也无法靠调高父级 z-index 来修复。
z-index: -1 为什么总在 background 后面
CSS 规范明确定义了同一堆叠上下文内的层叠顺序（从底到顶）：border/background → z-index: -1 定位元素 → 普通块级元素 → z-index: auto 或 0 的定位元素 → 正值定位元素。关键点在于：z-index: -1 严格排在第 1 步之后，也就是说它永远渲染在父元素的 background-color 和 background-image 下方。
这个顺序不可逆，也不受父元素 z-index 值影响。哪怕父容器是 z-index: 9999，其子元素设为 z-index: -1，依然落在父容器自身背景之下。
- 用 DevTools 的 Layers 面板检查，该元素会被标记为 “Under background”
- 父元素只要带
background，z-index: -1就等于主动隐身 - 这不是渲染错误，是规范行为；浏览器完全按标准执行
哪些场景下 z-index: -1 还能看见
z-index: -1 只有在它不被父背景吞掉时才可见。典型可用场景：
- 同级兄弟元素间做“下沉”：A 和 B 是同级
position: relative元素，A 设z-index: -1，B 设z-index: 0且带背景 → A 会显示在 B 的背景之下，但仍在 A 自身父容器背景之上（前提是该父容器没设背景） - 视觉穿透技巧：比如一个中间挖空的遮罩层，把
z-index: -1的内容“透”出来，但必须确保该内容的直接父级无background - 伪元素替代方案更可控：想实现底层装饰，优先用
::before+z-index: -1，并确保其宿主元素无背景
排查 z-index: -1 不见了的三步检查法
别急着删代码，按顺序确认：
- 父元素是否设置了
background或background-image？有 → 必然不可见，这是最常见原因 - 该元素是否已设置
position（relative/absolute等）？没设 →z-index完全无效，但不会“消失”，只是不参与层叠 - 是否误以为
z-index: -1是“最低安全值”？它不是保底选项，而是明确要求“沉到背景之下”，慎用于通用布局
替代 z-index: -1 的更可靠方案
当目标是“底层显示”而非“沉入背景”，应避开 z-index: -1：
- 用
::before伪元素承载背景或装饰层，主内容保持z-index: auto - 提升 DOM 层级：把需要底层显示的内容提到更高公共父容器下，与遮罩/浮层同级
- 用
isolation: isolate主动创建独立上下文，再内部用正 z-index 控制，比负值更可控
真正难的不是写负数，而是看清当前元素究竟在哪个层叠上下文里、它的背景来自哪一级父容器 —— 一旦父级带背景，z-index: -1 就只剩语义意义，没有视觉意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
