z-index没效果最常见原因是父容器创建了层叠上下文，导致子元素z-index只在该上下文中生效；它仅对position为relative、absolute、fixed或sticky的元素有效，且比较基于层叠上下文而非全局数值。
z-index 为什么设置了没效果
最常见的情况是 z-index 没起作用，并不是写错了，而是父容器触发了新的层叠上下文（stacking context）。只要父元素有 transform、opacity 小于 1、Filter、will-change 或 position 非 Static 且设置了 z-index（哪怕为 auto），它就会成为层叠上下文根节点——子元素的 z-index 只在该上下文内生效，无法和外部元素比高低。
验证方法：打开浏览器开发者工具，选中元素，看「Computed」面板里 z-index 是否显示为 auto 或具体数值；再往上逐级检查父级是否创建了层叠上下文。
z-index 生效的前提条件
z-index 只对「定位元素」有效，也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。对 static 元素设置 z-index 完全无效，css 会直接忽略。
- 想让普通块级元素（如
div）受z-index控制，至少加一句position: relative; - 用
position: absolute时，注意它会脱离文档流，可能影响布局，不是所有场景都适合 -
position: sticky的z-index行为和relative类似，但只在粘性生效区域内参与层叠
z-index 数值比较的常见误区
z-index 的比较不是全局“谁大谁在前”，而是按层叠上下文分组比较。两个同级元素即使 z-index 差值极大（比如 9999 vs 1），若它们属于不同层叠上下文，实际显示顺序仍由各自父上下文的层级决定。
立即学习“前端免费学习笔记（深入）”；
例如：
.parent-a { z-index: 10; position: relative; } .child-a { z-index: 9999; position: relative; } .parent-b { z-index: 20; position: relative; } .child-b { z-index: 1; position: relative; }此时 .child-b 一定显示在 .child-a 上方，因为它的父上下文（.parent-b）层级更高。
- 避免盲目堆高数值，优先理清 dom 结构和层叠上下文嵌套关系
- 调试时可临时给各层父容器加背景色或边框，肉眼观察层级归属
- 负值
z-index是合法的，但要注意：若父容器没有创建层叠上下文，负值元素可能被 body 背景盖住
现代布局中 z-index 的替代思路
在 flex 或 Grid 容器内部，元素默认不产生层叠上下文，z-index 依然可用，但更推荐用布局属性控制视觉顺序：
- Grid 中用
grid-row/grid-column显式定义位置，天然具备层叠逻辑 - Flex 中
order属性可改变渲染顺序，配合z-index可实现更精细控制 - 对纯覆盖类需求（如模态框、下拉菜单），建议统一用固定层级体系，比如定义 CSS 变量：
--z-modal: 1000;、--z-dropdown: 100;，避免散落的魔法数字
真正难调的往往不是 z-index 本身，而是没意识到某个 opacity: 0.99 或 transform: translateZ(0) 已经悄悄建了个新层叠上下文。