z-index设了没反应，主因是元素未定位（position为static时z-index被忽略）或父级创建了层叠上下文导致子元素z-index仅在内部生效；需显式设置position并检查祖先节点是否触发stacking context。
z-index 为什么设了却没反应
绝大多数情况不是值写小了，而是 z-index 根本没生效——它只对定位元素起作用。只要元素的 position 是 static（默认值），无论你写 z-index: 9999 还是 z-index: -9999，浏览器都会直接忽略。
常见错误现象：
- 元素明明加了
z-index: 100，但始终被盖在下面 - 用 JS 动态添加样式后层级突然错乱，大概率是漏写了
position - 父元素有
position: relative，子元素却没设position，误以为能“继承”定位上下文
实操建议：
- 给目标元素显式加上
position: relative（最安全，不改变文档流） - 避免用
position: static混淆判断——它不是“没写”，而是明确禁用定位和z-index -
position: sticky要特别注意：超出滚动边界后会退化为relative，此时z-index行为可能意外变化
父容器悄悄创建了层叠上下文
这是 z-index 失效最隐蔽也最常被忽略的原因。一旦某个祖先元素触发了层叠上下文（stacking context），它的所有子元素的 z-index 就只能在“这个盒子内部”比高低，再高也出不去。
常见触发条件（检查所有祖先节点）：
-
opacity小于 1（比如opacity: 0.99） -
transform不为none（哪怕只是transform: translateZ(0)） -
filter、will-change、isolation: isolate -
contain: layout或contain: paint
实操建议：
- 打开 Chrome DevTools → 「Computed」面板 → 搜索 “Stacking Context”，看是否有祖先节点标着 “This element establishes a stacking context”
- 临时删掉可疑父级的
transform或opacity，观察子元素是否立刻“浮上来” - 若必须用这些属性，考虑把它们上移到更高层级的容器（比如挂到
body下的 wrapper 上），而不是套在目标元素正上方
父元素 z-index 值太低，子元素再高也没用
子元素的 z-index 是相对其**直接父级所在层叠上下文**生效的。如果父容器本身 z-index: 2，而旁边一个兄弟容器是 z-index: 100，那整个子树都会被压在下面——因为层叠比较发生在同级之间，不是跨层穿透的。
典型场景：
- 轮播图组件里弹出的按钮，被页面顶部导航栏遮住
- 下拉菜单展开后，被下方
section的背景色盖住 - Modal 组件嵌套在某个带
transform的卡片里，怎么调z-index都不顶用
实操建议：
- 确保需要全局分层的元素（如弹窗、下拉、Tooltip），其最近共同祖先**不提前创建层叠上下文**
- 更彻底的做法：把这类元素直接挂到
body下（用 React Portal / Vue Teleport），绕过 DOM 层级干扰 - 不要盲目堆大数——
z-index: 999999解决不了上下文隔离，反而让后续维护踩坑
DOM 顺序或 flex/grid 排序覆盖了 z-index
即使 z-index 正常生效，也可能被更底层的渲染规则压过。CSS 层叠顺序有一套固定优先级：层叠上下文 > z-index > 文档流顺序（后出现的盖前面的） > flex order / grid placement。
容易被忽视的点：
- 两个元素
z-index相同，谁在 HTML 里写在后面，谁就在上面 - Flex 容器中设置了
order，可能让视觉顺序和 DOM 顺序不一致，影响最终层叠 - Grid 布局中，
grid-row和grid-column的隐式层叠行为有时会覆盖z-index
实操建议：
- 调试时先统一去掉所有
z-index，靠 DOM 顺序确认基础覆盖关系是否合理 - 在 flex/grid 容器上慎用
z-index，优先用order或grid-area控制视觉层级 - 遇到“明明 z-index 更高却还被盖”的情况，先查 computed 的「Stacking Context」和「z-index」状态，再查 DOM 位置
真正卡住人的从来不是 z-index 值该填多少，而是它到底有没有进入可比较的层叠上下文。每次怀疑失效，先开 DevTools 看「Stacking Context」提示，再逐级往上点开祖先节点的 Computed 样式——90% 的问题就出现在第三层或第四层父元素上，而不是你正在写的那个 class 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
