z-index 不生效的主因是元素未设置定位属性（position 为 relative/absolute/fixed/sticky），且受层叠上下文限制；需确保目标元素定位、避免祖先意外创建层叠上下文，并按功能分层管理数值。
z-index 不生效？先确认父元素有没有定位
很多情况下 z-index 看似写了却完全不起作用，根本原因不是值设小了，而是它只对「定位元素」有效。也就是说，position 必须是 relative、absolute、fixed 或 sticky 之一，static（默认值）下写 z-index 直接被忽略。
常见错误现象：div 上写了 z-index: 999，但始终被后面出现的元素盖住；检查发现它的 position 没改，还是 static。
- 务必给要控制层级的元素显式设置
position: relative（最常用且安全） - 如果父容器用了
position: absolute，子元素的z-index是相对于该父容器的层叠上下文，不是全局 - 不要依赖文档流顺序“碰运气”，
z-index和 DOM 顺序无关，只和层叠上下文有关
为什么两个同级元素设了不同 z-index 还是没分出前后？
问题往往出在「层叠上下文」被意外创建。一旦某个祖先元素形成了新的层叠上下文（比如设置了 opacity: 0.99、transform: translateZ(0)、will-change: transform 或 filter），它的所有子元素的 z-index 就只能在这个上下文内部比较，无法越过它去和外部兄弟元素比高低。
使用场景：做弹窗时，发现模态框被另一个带 filter: blur(1px) 的卡片遮住了，即使模态框 z-index 是 9999 —— 因为卡片自己建了个层叠上下文，把内部层级“锁死”了。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的「Layers」面板或勾选「Paint flashing」可快速识别隐式层叠上下文
- 避免在不需要的祖先上加
opacity（小于 1）、transform、filter等触发属性 - 真需要模糊/动效又想保持层级自由？把效果移到子元素上，而不是父容器
z-index 数值该设多大才保险？
数值本身没有上限，但盲目堆高（比如 z-index: 2147483647）反而暴露设计缺陷。真正影响层级的是「相对顺序」，不是绝对大小。
性能与兼容性影响：极高的数值不会拖慢渲染，但会让后续维护者困惑；IE6/7 对负值支持差，不过现在基本不用考虑。
- 按功能分层更可靠：比如
z-index: 10（基础内容）、50（浮动按钮）、100（Toast）、200（Dropdown）、300（Modal） - 留出空档（如每档差 10），方便中间插入新层级
- 避免跨项目复用魔数，用 CSS 自定义属性统一管理：
--z-modal: 300;
Flex/Grid 容器里的子元素能靠 z-index 控制覆盖吗？
可以，但前提是子元素自己是定位元素。Flex 或 Grid 本身不创建层叠上下文，也不限制 z-index 使用——这点和普通文档流一样。
容易踩的坑：以为 order 属性或 grid-area 排列会影响视觉层级，其实它们只改变布局位置，不改变绘制顺序；最终谁在上面，还是看 z-index + 定位。
- 给需要置顶的 Flex 子项加
position: relative再设z-index - Grid 中若用
place-items: center居中一个图标和文字，想让图标浮在文字上，不能只靠z-index，得确保图标有定位 - 注意：Grid 轨道本身不参与层叠，只有网格项（grid item）才参与
z-index 值。调试时优先看「谁创建了层叠上下文」，而不是反复调大数字。 
