z-index 不生效的主因是元素 position 为 static，须设为 relative/absolute/fixed/sticky 才激活；其次父容器触发层叠上下文（如 opacity<1、transform 等）会隔离子元素 z -index 作用域。
z-index 不生效是因为元素 position 是 static
绝大多数情况下，z-index没反应，就卡在这一步：它只对「定位元素」起作用。而默认的 position: static 是被忽略的——哪怕你写了 z-index: 9999，也完全无效。
检查方法很简单：打开开发者工具，选中目标元素，在「Computed」面板里搜 position，看实际值是不是 static。如果是，就等于没启动 z-index 的开关。
- 必须显式设置
position为relative、absolute、fixed或sticky才能激活z-index -
position: relative最常用，不影响文档流，适合只是想调层叠顺序的场景 - 别用
position: initial或unset覆盖，它们会退回到static
父容器创建了新的层叠上下文（stacking context）
即使子元素设置了 position 和 z-index，如果它的某个祖先元素「无意中」触发了新层叠上下文，那子元素的 z-index 就只能在那个小圈子里比高低，根本出不去和外部元素竞争。
常见触发条件包括：opacity 小于 1、transform 非 none、filter 有值、will-change 指定相关属性、isolation: isolate 等——这些都会让该元素变成一个“层叠隔离区”。
立即学习 “ 前端免费学习笔记（深入）”；
- 用 DevTools 的「Layers」面板（Chrome）或「3D View」（Firefox）可直观看到层叠分组
- 临时注释掉父级的
opacity或transform，看 z-index 是否突然生效，就能快速定位 - 如果必须保留
transform，又需要跨容器控制层级，考虑把要置顶的元素提到更高层级的 DOM 位置，绕开这个上下文
z-index 数值比较发生在同一层叠上下文中
z-index 不是全局排名，而是“小组内排序”。两个元素即使数值差很大（比如 100 vs 1），只要不在同一个层叠上下文里，就互不干扰——可能 1 反而盖在 100 上面。
典型例子：A 元素在 body 下，z-index: 100；B 元素在某个 opacity: 0.99 的弹窗内部，z-index: 1。结果 B 仍会盖在 A 上，因为弹窗自己就是一个更高层级的上下文根节点。
- 检查「谁是最近的共同层叠上下文祖先」，所有比较都以它为基准
- 没有单位、不能写
z-index: auto（除非你明确想继承父级行为） - 负值合法（如
z-index: -1），但仅限于在当前上下文中排后面，不会穿透到父上下文底层
Flex/Grid 容器中的 z-index 行为容易误判
在 display: flex 或 display: grid 的容器里，子项即使没设 position，也能靠 z-index 控制层叠——这是 CSS 规范特例，但很多人不知道它只适用于「flex/grid item」本身，且依赖容器未创建新层叠上下文。
一旦父容器同时满足 display: flex + opacity: 0.99，这个特例就失效：item 又退回成普通块级元素，z-index 再次被无视。
- Flex/Grid item 的
z-index有效前提是：父容器是「层叠上下文根」（即没触发隔离） - 不要混用
z-index和order（flex）或grid-row（grid）来猜层叠效果，它们解决的是不同维度的问题 - 遇到诡异覆盖时，先给 item 加个
position: relative，回归标准行为，反而更可控
最常被跳过的其实是第二步：没人想到 opacity: 0.99 或一行 transform: translateZ(0) 就能让整个子树的 z-index 失效。调的时候盯着「层叠上下文边界」比盯着数字更有用。
