z-index只影响同层叠上下文内的兄弟元素，无法使子元素盖过父元素；父元素设position非static且z-index（含0或auto）即创建新层叠上下文，子元素z-index仅在该上下文中生效。
z-index 对盒子内部元素完全没影响，它只管兄弟元素之间的层叠顺序。
z-index 为什么不能控制子元素盖过父元素
这是最常见的误解源头：以为给子元素设 z-index: 999 就能“冲破”父容器。实际上，只要父元素设置了 position（非 static）且有 z-index 值（哪怕是 0 或 auto），它就创建了新的层叠上下文（stacking context）。子元素的 z-index 只在这个新上下文里生效，再高也出不去。
- 父元素
position: relative+z-index: 1→ 创建层叠上下文 - 子元素
position: absolute+z-index: 9999→ 层叠值仅相对于该父容器计算 - 即使子元素
z-index是 9999，它在整个页面中仍被锁在父容器的层叠层级之下
哪些情况会意外创建层叠上下文
除了显式设置 z-index，很多 CSS 属性也会悄悄触发层叠上下文，导致 z-index 行为“突然失效”：
-
opacity小于 1（比如opacity: 0.99） -
transform不是none（哪怕只是transform: translateZ(0)） -
filter有值（如filter: blur(1px)） -
will-change设为transform、opacity等 isolation: isolate
这些都会让元素变成“层叠上下文根”，它的所有后代都困在里面——和 z-index 无关，纯属隐式规则。
想让子元素盖过兄弟容器？得动“祖辈”层级
如果两个并列的卡片（.card-a 和 .card-b）需要控制谁在上，而其中某个卡片内部有个弹窗要盖过另一个卡片，那就不能只调弹窗的 z-index：
- 确保两个卡片本身处于同一层叠上下文中（即它们的共同父容器没创建上下文，或都设了相同
z-index） - 把弹窗所在的卡片整体提级：
.card-a { z-index: 10; }，而不是只设.card-a .popup { z-index: 100; } - 如果卡片父容器已设
z-index，检查它是否无意中成了上下文根（比如加了opacity或transform）
简单说：跨容器的层叠控制，必须在“同级容器”上做文章，不是在子孙上堆数字。
Chrome DevTools 里怎么快速验证层叠上下文
靠猜很容易翻车。打开 Chrome 开发者工具，选中元素后，在右侧面板的 Computed 标签页里搜 stack：
- 看有没有
stacking context字样 —— 有，说明它自己就是上下文根 - 展开
z-index项，注意显示的是z-index: 0 (computed)还是z-index: auto—— 后者在某些条件下也会创建上下文 - 配合
Layers面板（需在 More Tools > Rendering 中开启 “Paint flashing” 和 “Layer borders”）可直观看到分层结构
真正麻烦的从来不是写错 z-index 数值，而是没意识到某条看似无害的 opacity 或 transform 已经悄悄把你整个模块锁进了一个看不见的层叠牢笼里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
