z-index: -1 的元素不可见是因为它被严格置于父元素背景层之下，而非数值过小；css规范规定其渲染顺序恒在border/background之后，即使父容器z-index为9999亦无法覆盖该背景。
z-index: -1 的元素不可见，不是因为“数值太小”，而是它被强制塞进了**背景层之下**——这是 CSS 层叠顺序（stacking order）的硬性规则，和父容器是否定位、是否创建堆叠上下文无关。
为什么 z-index: -1 一定在 background 之后？
CSS 规范明确定义了同一堆叠上下文内的层叠顺序（从底到顶）：
1. 边框和背景（border/background）
2. z-index: -1 的定位元素
3. block 流内元素（如 div、p）
4. float 元素
5. inline 元素
6. z-index: auto 或 0 的定位元素
7. z-index: 1 及以上的定位元素
注意：第 2 步的 z-index: -1 元素，**严格排在第 1 步（背景）之后**。也就是说，它永远画在父元素的 background-color 和 background-image 之下 —— 不是“被遮住”，而是“根本没机会盖上去”。
这个顺序不可逆，也不受父元素 z-index 值影响；哪怕父元素是 z-index: 9999，其子元素设为 z-index: -1，依然落在父元素自身背景之下。
z-index: -1 的唯一合法用途
它只在一种场景下有意义且安全：你想让一个定位元素「沉」到它兄弟元素的背景之下，但又不希望它被父容器背景吞掉。例如：
- 两个同级
position: relative元素 A 和 B，A 设z-index: -1，B 设z-index: 0→ A 会显示在 B 的背景之下（如果 B 有背景），但仍在 A 自身父容器的背景之上（前提是父容器没设背景） - 用作“视觉穿透”技巧：比如一个带描边的遮罩层，中间挖空，把
z-index: -1的内容“透”出来 —— 但必须确保该内容的父级没有背景
一旦父元素有 background，z-index: -1 就等于“主动隐身”。这不是 bug，是规范行为。
常见误用与排查线索
如果你写了 z-index: -1 却发现元素不见了，按顺序检查：
- 父元素是否有
background-color或background-image？有 → 必然不可见 - 该元素是否设置了
position（relative/absolute等）？没设 →z-index完全无效，但也不会“消失”，只是不参与层叠 - 是否误以为
z-index: -1是“最低层级”，想用来做“底层装饰”？别这么做 —— 改用伪元素（::before）或额外容器更可控 - 浏览器 DevTools 的 Layers 面板里，该元素是否被标记为 “Under background”？是 → 符合预期，不是渲染错误
真正难处理的，从来不是 z-index: -1 本身，而是你指望它“低调存在却不消失”时，忘了它连父元素的背景都盖不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
