z-index不生效的根本原因是父元素创建了新的堆叠上下文，导致子元素被限制在局部层级；需检查position、opacity、transform等触发条件，并确保定位元素有实际偏移或正确上下文环境。
z-index 不生效？先确认元素是否创建了新的堆叠上下文
很多情况下 z-index 看似写了却不起作用，根本原因不是写错了值，而是父容器悄悄创建了新的堆叠上下文，把子元素“锁死”在局部层级里。
触发新堆叠上下文的常见属性包括：position 非 static + z-index 有值、opacity 小于 1、transform 非 none、filter 有值、will-change 指定相关属性等。
- 检查父级是否无意中加了
transform: translateZ(0)或opacity: 0.99—— 这些都会隔离子元素的z-index作用域 - 用浏览器开发者工具的“Layers”面板（Chrome）或“Computed”里的
stacking context提示，直接看谁创建了上下文 - 若需跨上下文控制层级，只能提升到共同祖先下操作，不能靠子元素自身
z-index越级覆盖
relative 定位元素设 z-index 但没效果？它必须有定位行为才参与堆叠
position: relative 元素即使设了 z-index，若未实际偏移（即 top/left 等为 0 或未声明），仍可能被当作“普通流内元素”处理，在某些浏览器渲染路径中不进入堆叠顺序计算。
- 确保至少声明一个偏移量，哪怕只是
top: 0或transform: translateX(0) - 避免只依赖
z-index而忽略定位前提：z-index对position: static元素完全无效，对未触发定位行为的relative元素也常不可靠 - 在 Flex/Grid 容器中，子项即使
position: relative，其z-index仍受容器的层叠规则约束，不一定按预期叠加
多层弹窗/浮层重叠时，z-index 数值该设多大？别硬凑 9999
盲目堆高 z-index 值（比如 z-index: 99999）看似保险，实则埋下维护隐患：后续新增层级难预估、CSS 覆盖混乱、调试时无法快速判断相对关系。
立即学习“前端免费学习笔记（深入）”；
- 用小步进策略：基础层
z-index: 0，模态框100，带遮罩的弹窗200，全局提示300，开发工具栏999 - 把层级逻辑抽成 CSS 自定义属性，例如
--z-modal: 100、--z-toast: 300，组件内用z-index: var(--z-toast)，改一处全更新 - 注意：不同框架（如 React Portal 渲染的节点）可能挂载到
body下，脱离原 DOM 层级结构，此时需统一用同一套z-index变量管理，否则容易出现“明明数值更大却被盖住”的现象
Flex 子项之间 z-index 生效但和兄弟容器打架？注意 flex item 的默认堆叠顺序
Flex 容器中，子项的 z-index 只在它们彼此之间起作用；但如果某个子项是 position: relative，另一个是普通块级元素，它们的层叠顺序还受 HTML 流顺序和是否创建堆叠上下文影响。
- Flex 项默认按源顺序堆叠：后写的项自然盖在先写的项上，除非显式用
z-index打破 - 若一个 flex item 是
position: absolute，它会脱离 flex 流，但依然受限于父 flex 容器的堆叠上下文 —— 此时它的z-index是跟同级其他绝对定位项比，不是跟整个页面比 - 想让某个 flex item “浮出”整个 flex 容器去盖住外部元素？不行。必须把它移出 flex 容器（比如用 Portal），或让 flex 容器本身成为更高层级的上下文
z-index 本身，而是它背后那一层层隐式创建的堆叠上下文 —— 它们不报错、不警告，只在你调了半天发现“明明写了就是不生效”的时候，默默笑出声。 
