z-index仅对非static定位元素生效，且受父级堆叠上下文限制；每个堆叠上下文独立排序，子元素z-index无法突破父级边界；调试需检查position属性、意外创建的堆叠上下文及参照物是否同层。
z-index只在定位元素上生效
很多人给普通
z-index却没效果，根本原因是：它必须配合position（除static外）才能起作用。不设置position: relative或position: absolute，z-index直接被忽略。
常见错误现象：z-index: 999写上了，但元素还是被盖住；检查发现父容器是position: static（默认值），子元素即使定位了，也受限于父级的 stacking context。
- 必须显式设置
position：推荐用relative（不脱离文档流）或absolute（脱离流、精确定位） -
position: fixed和position: sticky同样支持z-index -
position: static下z-index无效，且无法创建新的 stacking context
stacking context不是自动继承的
每个 stacking context 都是一块“独立的层级空间”，它的内部z-index只在自己内部比大小，不和外部直接比较。一个常见误解是“父元素z-index: 10，子元素z-index: 100就一定在最上面”——其实子元素再大，也出不了父级这个 context 的边界。
触发新 stacking context 的条件不止z-index，还有：opacity小于1、transform非none、filter、will-change等。比如给父容器加了opacity: 0.99，它立刻变成独立 stacking context，子元素的z-index就只能在它内部排序。
- 查看是否意外创建了 stacking context：用浏览器开发者工具的“Layers”面板或勾选“Paint flashing”观察渲染层
- 避免无意识触发：慎用
opacity: 0.99代替1，transform: translateZ(0)会强制提升为合成层，也可能干扰预期层级 - 父级 stacking context 的
z-index值决定它在整个页面中的“入场顺序”，子级再高也跨不出去
同级元素的默认堆叠顺序有固定规则
没设z-index的定位元素，按 HTML 出现顺序堆叠（后写的在上），但这只是“同属一个 stacking context 且 z-index:auto 时”的规则。一旦涉及多个 context，就得看它们各自的根层级值。
例如两个兄弟容器 A 和 B，A 设置了z-index: 1，B 是z-index: 2，那 B 整体就在 A 上方；哪怕 A 内部有个z-index: 999的子元素，它仍被 B 容器整体压住。
- 默认 stacking 顺序（从底到顶）：
background/border→z-index: auto的块级定位元素 →z-index: auto的行内定位元素 →z-index: 0及以上的元素 -
z-index: auto和z-index: 0不同：auto不创建新 context，0会（当该元素已定位） - 负
z-index（如-1）会让元素沉到其父 context 的 background/border 下方，可能被遮挡不可见
调试层级问题的关键检查点
遇到“明明写了 z-index 却不生效”，别急着调数字，先确认这三点：
- 目标元素是否设置了非
static的position？用开发者工具检查 computed 样式里的position值 - 它的父级是否无意中创建了 stacking context？查
opacity、transform、filter、will-change、isolation: isolate等属性 - 对比的参照物是否在同一 stacking context 里？如果不在，得往上找共同父级，看谁的
z-index更大
真正难的不是写z-index，而是看清当前 DOM 节点嵌套中，到底有几个 stacking context、各自根层级是多少。浏览器的“Rendering”面板里打开“Layer borders”能直观看到分层边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
