z-index不生效主因是未激活定位或被层叠上下文截断：元素需设position（非static）才生效；父级加opacity/transform等会创建独立层叠上下文，使子元素z-index失效。
z-index 不生效，八成不是数字不够大，而是它压根没被“激活”——定位属性没设对，或者被层叠上下文悄悄截断了。
元素没设 position（非 static）
这是最常踩的坑：写了 z-index: 999，但元素仍是默认的 position: static，浏览器直接忽略该声明。
- 浮动（
float）、内联（display: inline）或普通块级元素，即使加了z-index，也完全无效 -
position: relative是最安全的“占位+激活”方案：不改变文档流，又能启用z-index - 如果用
position: absolute，记得确认父容器是否设置了position: relative（否则会相对 viewport 定位）
.tooltip {
position: relative; /* 必须！不能省 */
z-index: 1000;
}父元素意外创建了层叠上下文
只要父级加了 opacity: 0.99、transform: scale(1)、filter: blur(0)、will-change: transform 等任意一条，就会生成独立的层叠上下文——子元素的 z-index 就只能在它内部比大小，再高也盖不过兄弟容器里的内容。
- 用开发者工具的 Computed 面板查看目标元素，搜
stacking context，标为Yes就是中招了 - 临时注释掉父级的
opacity、transform等样式，看遮挡是否消失 - 若必须保留动效，可把需要前置的元素“提级”：用 JS 挂到
document.body下，再用position: fixed+top/left手动定位
两个元素根本不在同一层叠上下文中比较
比如弹窗嵌在 .content 里，顶部导航栏是平级的 .header，两者父级都没定位 → 各自形成默认层叠上下文，z-index 互不感知。
立即学习“前端免费学习笔记（深入）”；
- 检查 HTML 结构：想让 A 盖过 B，先确认它们最近的共同父容器是否已定位（如
position: relative） - 给这个共同父容器显式设置
z-index（哪怕只是z-index: 0），让它成为统一的层叠上下文根 - 避免“只调子元素不调父级”的惯性操作：子元素
z-index: 999，父级z-index: 1，结果还是被z-index: 2的兄弟父块整体压住
动画/交互过程中 z-index 被悄悄覆盖
CSS 动画常用 transform 和 opacity，但这两者本身就会触发新层叠上下文。如果你只给动画元素写 z-index 却漏了 position，那动画一开，z-index 就彻底失效。
-
will-change: transform效果等同于transform: translateZ(0)，也会提前建上下文——必须同步加position: relative - 避免对同一元素同时设
z-index和opacity: 0：半透明本身建上下文，可能抵消层级意图 -
绝对定位 + 动画的组合，务必保证：有
position→ 有z-index→ 父级没意外建上下文
真正卡住人的从来不是 z-index 值写多大，而是它在哪一层“算数”——先打开开发者工具 Layers 面板看结构，再顺着 DOM 往上查 position 和那些“看似无害”的 CSS 属性（opacity、transform、filter），问题基本就浮出来了。
