z-index无效主因是元素未定位或被父级层叠上下文隔离；必须设position为relative/absolute/fixed/sticky才生效，且需排查opacity
z-index 不是万能开关，它只在定位元素上生效，且受层叠上下文限制——直接给普通块或浮动元素加 z-index 一定无效。
为什么设置了 z-index 却没反应？
最常见原因是元素没定位：z-index 对 position: static（默认值）完全无效。哪怕你写了 z-index: 999，只要没配 position: relative、absolute、fixed 或 sticky，浏览器就当它不存在。
其他典型失效场景：
- 给
float元素设z-index—— 浮动不触发层叠上下文，必须先加position: relative才能启用 - 父容器用了
opacity: 0.99、transform: translateY(0)或filter: blur(0)—— 这些会悄悄创建新层叠上下文，子元素的z-index只在父内有效 - 两个同级元素都没显式设
z-index，仅靠 HTML 顺序堆叠 —— 后写的元素天然盖住前写的，和负margin无关
z-index 数值怎么设才合理？
别一上来就写 z-index: 9999。数值本身没意义，关键看它在哪个层叠上下文中比较。
- 基础层（背景、边框）：用
z-index: 0或-1（需父容器有背景色） - 内容层（卡片、表单）：统一用
z-index: 10～99范围 - 浮层（弹窗、Tooltip）：固定用
z-index: 1000，避免被意外覆盖 - 绝对不要混用无规律的大数：比如一个模块用
999，另一个用10000，后续维护时极易冲突
如果发现某元素始终被压，先检查它的父容器是否已有 z-index: 1 —— 子元素再大也超不出这个上限。
负 margin 和 z-index 混用时谁管“位置”、谁管“前后”？
负 margin 只改变绘制位置，不改变文档流占位；z-index 只决定谁在上谁在下，不管偏移多少。两者完全解耦。
-
margin-top: -20px让 A “画”到 B 上面，但若 A 没设z-index，而 B 后面有个position: relative; z-index: 1的 C，C 仍会盖住 A - 想让 A 稳稳盖住 B，必须同时满足：A 有定位 + A 的
z-index> B 的z-index（或 B 未设，此时 A 设 1 就够） - flex/grid 子项无视负
margin的重叠效果，它们按轴线对齐，要重叠得用transform或绝对定位
真正难调的不是数值大小，而是层叠上下文嵌套层级——浏览器开发者工具里点开“Computed”，看 z-index 是否显示为实际生效值，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
