z-index不生效的根本原因是元素未进入定位上下文；它仅对position为relative/absolute/fixed/sticky的元素有效，且受父级层叠上下文限制。
z-index 不生效？先确认元素是否进入定位上下文
绝大多数 z-index 失效问题，根本原因不是写错了值，而是目标元素没创建层叠上下文（stacking context）。z-index 只对「已定位元素」（即 position 为 relative、absolute、fixed 或 sticky）有效，且其效果受父级层叠上下文限制。
常见误操作：
- 给
position: static元素设z-index—— 完全被忽略 - 父容器用了
opacity: 0.99、transform: translateZ(0)或will-change: transform—— 意外创建了新层叠上下文，子元素的z-index只在该上下文内比较 - 两个兄弟元素各自有
z-index，但它们的共同父容器没有定位属性 —— 此时层级由 HTML 流顺序决定，z-index仍生效，但容易误判
同级定位元素怎么比大小？看 z-index 数值和声明顺序
当多个元素处于同一层叠上下文（比如同为 body 的子元素，且都设了 position: absolute），它们的堆叠顺序严格按 z-index 值从低到高排列；值相同时，后出现在 DOM 中的元素盖在前面的上面。
.box-1 {
position: absolute;
z-index: 10;
}
.box-2 {
position: absolute;
z-index: 5; /* 小于 box-1，会被遮挡 */
}
.box-3 {
position: absolute;
z-index: 10; /* 和 box-1 相同，但 DOM 在后，会盖住 box-1 */
}注意：z-index 支持负数，z-index: -1 会落到父容器背景层之下（如果父容器有背景色，则不可见）。
立即学习“前端免费学习笔记（深入）”；
父子元素层级“反直觉”？检查父级是否截断了层叠流
这是最常被忽略的陷阱：子元素的 z-index 再大，也突破不了父元素自身所在的层叠上下文。例如：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 9999; /* 看似很大，但只在 parent 的层叠上下文中有效 */
}此时若另一个兄弟元素 .sibling 的 z-index 是 2，它就会盖住整个 .parent（包括 .child），因为 .parent 整体属于 z-index: 1 层。
解决思路：
- 把需要“浮出”的子元素提升到与父容器同级的 DOM 位置（如用 React Portal / Vue Teleport）
- 移除父容器不必要的
z-index，让它不创建独立层叠上下文 - 确保父容器的
z-index足够高（但要意识到这会影响所有子元素）
调试 z-index 问题的实用方法
浏览器开发者工具里直接看 Computed 面板里的 z-index 值，但更关键的是看「Layer」或「Layers Panel」（Chrome DevTools → More Tools → Layers），能直观看到每个层叠上下文的边界和嵌套关系。
临时排查技巧：
- 给可疑元素加
outline: 2px solid red，确认是否真的被遮挡，还是透明/尺寸问题 - 在控制台执行
getComputedStyle(el).zIndex，验证 CSS 是否被正确解析（返回"auto"表示未显式设置） - 逐级向上检查父元素是否设置了
transform、filter、opacity < 1等隐式触发层叠上下文的属性
真正难处理的永远不是数值本身，而是你没意识到那个 opacity: 0.999 已经悄悄把你想要弹出的菜单锁死在局部上下文里。
