z-index“失效”实为层叠上下文隔离所致：transform/opacity等触发新上下文，使内部z-index仅限局部比较；需检查父级是否创建上下文，并用css变量统一管理层级。
z-index 在绝对定位元素上“失效”，几乎从来不是 z-index 本身的问题，而是动画触发了新的层叠上下文，把元素锁进了局部层级牢笼里。
transform/opacity 动画会悄悄创建层叠上下文
只要给一个 position: absolute 元素加了 transform（哪怕只是 transform: translateX(0)）或 opacity（哪怕值是 1），它和它的所有子元素就自动被关进一个新的层叠上下文里。
- 这个上下文像一堵透明墙：内部的
z-index只能跟内部其他元素比高低，无法越过这堵墙去跟兄弟容器、导航栏或模态框争顺序 - 常见现象：
z-index: 9999的弹窗，在一个带transform: scale(1)的滚动区域里被盖住 - 验证方法：在 Chrome DevTools 的「Computed」面板里选中该元素，搜索
stacking context—— 如果显示 “Yes”，说明它已被隔离
z-index 本身不支持过渡或动画
写 transition: z-index 0.3s 是无效的。浏览器会静默忽略，但你可能误以为“延迟生效”，其实是 transform 或 opacity 过渡完成时，层叠上下文重建导致视觉顺序突变。
- 正确做法是用 JS 在动画关键节点手动切换
z-index值：element.style.zIndex = '1000'放在animationstart或transitionstart事件里；动画结束后再清理（比如设回'auto'或默认值） - Safari 中
transitionend可能触发两次，建议加个防重 flag：if (handled) return; handled = true; - 别依赖
z-index做“浮起”动画效果——它没有中间态，只有开关式跳变
fixed 元素在动画父容器里被“钉死”
一个 position: fixed 的按钮，如果父级容器用了 transform，它就不再相对于视口定位，而会被“钉”在那个父容器的层叠上下文中。
- 典型表现：顶部
fixed导航栏，被一个全屏transform: translateY(0)模态框挡住 - 根本原因不是模态框 z-index 高，而是它的父容器创建了新上下文，fixed 元素降级为相对该容器定位
- 修复路径二选一：
– 移除父容器的transform，改用top/left或margin位移（不触发上下文）
– 把 fixed 元素直接挂到document.body下，并用 JS 同步滚动偏移（注意处理window.visualViewport缩放）
嵌套动画组件中 z-index 数字堆砌不可靠
在多个 transform 容器层层嵌套的场景下，硬写 z-index: 1000、2000、9999 不仅难维护，而且大概率失效——因为每个容器都可能是独立的层叠上下文根。
- 真正可控的做法是统一用 CSS 自定义属性：比如定义
--layer-modal: 1000;，然后写z-index: calc(var(--layer-modal) + 10); - 避免全局魔数，按功能分段预留空间：基础组件
1–99、浮层类100–999、全屏遮罩1000+ - 最常被忽略的一点：查层级问题时，别只盯着目标元素——往上翻两层 DOM，检查每一个父级是否意外设置了
transform、opacity、filter或will-change
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
