z-index只对position为relative、absolute、fixed或sticky的定位元素生效；非定位元素（如Static）即使设置z-index也会被忽略，且父元素创建层叠上下文后，子元素z-index仅在该上下文中比较。
z-index 不生效？先看元素有没有 position
z-index 只对「定位元素」起作用，也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。如果某个元素只是 div 默认的 static，哪怕写了 z-index: 999，浏览器也直接忽略。
常见错误：给父容器设了 z-index，子元素没设 position，结果子元素还是被盖住——因为子元素没进入层叠上下文，它的层级由父容器决定，而不是自己。
- 检查目标元素是否设置了
position: relative（最常用且安全） - 避免只写
z-index而漏掉position - 用浏览器开发者工具的「Computed」面板确认
position实际值是不是static
父子元素 z-index 失效？可能是层叠上下文搞的鬼
当一个元素设置了 position 且 z-index 为非 auto 值（比如 1），它就可能创建新的「层叠上下文」。此时它的所有子元素的 z-index 都只在该上下文内比较，无法和外部同级元素直接比高低。
比如：.parent { position: relative; z-index: 10; } → 它内部的 .child { z-index: 999; } 再大，也无法盖过外部 .sibling { z-index: 20; }，因为 .child 的 999 是相对于 .parent 的 10，不是全局的。
立即学习“前端免费学习笔记（深入）”；
- 创建层叠上下文的条件不止
z-index：还有opacity 、transform、Filter、will-change等，都可能意外隔离层级 - 调试时可临时移除父级的
z-index或transform，看子元素是否突然“浮出来” - 想让子元素参与全局层叠？要么把子元素提到父级同层，要么让父级不创建新上下文（比如改用
z-index: auto）
多个同级元素怎么排前后？靠 z-index 数值大小
在同一个层叠上下文中，z-index 数值大的覆盖数值小的；没写 z-index 的默认是 auto，等价于 0（但注意：auto 和 0 在层叠顺序上表现一致，但语义不同）。
数值可以是负数，比如 z-index: -1 会让元素沉到其最近层叠上下文的背景之下（但仍可能盖住更底层的其他上下文）。
.box-a { position: relative; z-index: 1; } .box-b { position: relative; z-index: 0; } .box-c { position: relative; z-index: -1; }上面三者同级，渲染顺序从下到上就是：.box-c → .box-b → .box-a。
- 不要迷信“超大数字”，
z-index: 9999和999999在同一上下文里效果一样 - 建议按模块分段规划：导航栏
100、弹窗1000、全屏遮罩2000，留出余量便于后续插入 - 避免用
!important强行覆盖z-index，容易引发连锁覆盖问题
移动端或 flex/grid 布局里 z-index 还管用吗
管用，但要注意：flex 容器的子项即使没写 position，只要设置了 z-index，也会自动触发 position: static 的隐式定位行为——等等，这是错的。
实际上，z-index 在 display: flex 或 grid 容器中依然只对已定位元素有效。Flex 子项默认是 static，所以 z-index 不生效，除非你显式加 position: relative。
不过有个例外：css 的 order 属性会影响视觉顺序，但它和 z-index 无关，是布局轴上的重排，不改变层叠顺序。
- Flex/Grid 项目要控制遮盖关系，必须加
position才能启用z-index - 不要依赖
order或z-index混用来实现“视觉上在前”，它们解决的是不同维度的问题 - 某些老版本 ios safari 对
z-index+transform组合有渲染 bug，必要时加translateZ(0)触发硬件加速并修复
层叠逻辑本身不复杂，但嵌套一深、上下文一多，就很容易误判“谁该在上面”。最稳妥的做法是：每次调 z-index 前，先用 DevTools 看一眼那个元素的 position 是什么，再点开它的父节点，确认有没有无意中创建了新的层叠上下文。