z-index不生效主因是元素未形成层叠上下文或缺少position定位；需确保父容器层叠层级合理，跨容器时子元素z-index受父级限制，推荐用CSS自定义属性统一管理。
z-index 不生效的常见原因
直接给元素加 z-index 却没反应？大概率是因为该元素没有形成自己的层叠上下文（stacking context）。z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）有效，且其父容器若已建立层叠上下文，子元素的 z-index 就只在该上下文内比较，不会“越级”盖过兄弟容器。
- 检查是否漏写
position：仅设z-index: 999无效，必须搭配position: relative等 - 避免父级无意创建层叠上下文：比如父元素有
opacity: 0.99、transform: translateZ(0)、will-change: transform或filter，都会触发新层叠上下文 - 浏览器默认渲染顺序优先于
z-index：未定位的块级元素按文档流堆叠，此时z-index完全不参与计算
同级元素间 z-index 的比较规则
当多个元素处于同一层叠上下文中（例如都是 position: absolute 且父容器无额外层叠上下文），z-index 值大的会覆盖值小的。但要注意：数值类型必须是整数，auto 相当于 0，且负值合法（可置于背景之下）。
-
z-index: 1和z-index: 1.5效果相同——小数会被截断为1 -
z-index: auto的元素不会参与层叠顺序竞争，由文档流位置或隐式层级决定显示次序 - 两个
z-index: 0的元素，后出现在 HTML 中的会盖在前面的上面（文档流顺序 fallback）
跨父容器时 z-index 失效的真实场景
这是最容易误判的情况：A 元素在容器 A 中 z-index: 100，B 元素在容器 B 中 z-index: 999，但 A 仍盖在 B 上。根本原因是容器 A 和容器 B 自身的层叠顺序决定了子内容的“天花板”。只要容器 A 的层叠层级高于容器 B，无论其子元素 z-index 多大，都无法突破这个限制。
- 容器 A 若设置了
z-index: 2，容器 B 是z-index: 1，那么即使 B 内部有z-index: 9999，也依然被 A 内部z-index: 1的子元素遮挡 - 解决方法不是拼命调高子元素
z-index，而是统一管理父容器的层叠层级，必要时用z-index: 10/z-index: 20划分逻辑层级（如 header > modal > tooltip） - 注意：
position: static的父容器无法设z-index，所以要确保需要参与层叠控制的容器本身是定位元素
现代布局中 z-index 的替代思路
过度依赖 z-index 容易导致“魔数蔓延”，比如满屏 z-index: 999999。CSS 新特性提供了更可控的方式：
立即学习“前端免费学习笔记（深入）”；
-
isolation: isolate可显式创建独立层叠上下文，避免意外继承或污染 - 使用
contain: layout paint也能触发层叠上下文，同时带来性能优化 - 对于模态框、下拉菜单等组件，建议用 CSS 自定义属性统一管理层级：
--z-modal: 1000; --z-tooltip: 1050;，再通过z-index: var(--z-modal)引用，便于全局调整
真正难的不是写对 z-index，而是理清谁和谁在同一个层叠上下文里——这往往需要 inspect 元素，逐层看 computed z-index 和 stacking context 标记，而不是靠猜。
