z-index未失效，而是被父元素触发的层叠上下文隔离：transform、opacity、filter等属性会创建新上下文，使子元素z-index仅在内部生效；z-index不支持过渡动画，需JS手动控制；fixed元素遇层叠上下文会相对其定位；多层嵌套应统一用CSS变量管理层级。
动画中元素突然“消失”或“错层”：z-index 没生效？
不是 z-index 失效，而是它被动画触发的层叠上下文（stacking context）覆盖了。只要父元素设置了 transform、opacity、filter 等属性（哪怕值是 none 或 1），就会创建新的层叠上下文——此时子元素的 z-index 只在该上下文内有效，无法和外部其他元素比高低。
- 常见错误现象：
z-index: 999的弹窗在transform: translateX(10px)的滚动容器里被遮挡 - 检查方法：用浏览器开发者工具选中元素，看“Computed”面板里是否出现
stacking context提示 - 修复思路：让弹窗脱离原父级层叠上下文，比如移出动画容器，挂到
body下；或确保弹窗父级不触发新上下文
transition 或 animation 过程中 z-index 突然跳变
z-index 本身不支持过渡或动画，写成 transition: z-index 0.3s 完全无效。浏览器会静默忽略，但你可能误以为“延迟生效”，其实是其他属性（如 opacity）过渡完成时，层叠顺序才因上下文重建而改变。
- 使用场景：下拉菜单展开时想“浮起”盖过下方内容，不能靠
z-index动画实现 - 正确做法：用 JS 在动画开始前/后手动设置
z-index，例如在transitionstart事件里设高值，transitionend后清理 - 注意兼容性：
transitionend在 Safari 中可能触发两次，建议加防重处理
position: fixed 元素在 transform 父容器里层级异常
position: fixed 本应相对于视口定位，但一旦其任意祖先有层叠上下文（比如带 transform 的 wrapper），它就会被“钉”在那个上下文中，z-index 也只和该上下文内其他元素比较。
- 典型表现：顶部导航栏用了
position: fixed，却被一个transform: scale(0.98)的全屏模态框挡住 - 根本原因：模态框父容器创建了层叠上下文，fixed 元素被降级为相对该容器定位
- 解决路径：要么移除父容器的
transform（改用top/left位移），要么把 fixed 元素提到 body 顶层（需同步处理尺寸和响应式逻辑）
多个动画组件嵌套时 z-index 维护成本飙升
靠硬写数字（z-index: 100, 200, 300）管理层级，在多层动画嵌套下极易冲突。更麻烦的是，不同组件可能各自创建层叠上下文，导致数字完全失效。
立即学习“前端免费学习笔记（深入）”；
- 推荐策略：用 CSS 自定义属性统一控制，例如
--layer-base: 10;，再通过z-index: calc(var(--layer-base) + 5);衍生 - 关键约束：所有需要跨上下文比较层级的元素，必须处于同一层叠上下文根节点下（通常是
body或一个无 transform 的 layout 容器） - 容易被忽略的一点：即使没写
transform，某些 CSS 框架（如 Tailwind 的scale-100）或重置样式也可能悄悄添加transform: none，照样触发上下文
