直接给定位元素加z-index不能保证其在动画中保持层级，因为transform、opacity
直接给定位元素加 z-index 并不能让它“在动画中保持层级”——因为动画本身（比如 transform）可能意外创建新的层叠上下文，导致原本设好的 z-index 失效或被限制在局部范围内。
为什么动画一动，元素就“掉到后面”了？
常见现象是：一个 #tooltip 元素本该始终浮在最上层，但当它父容器触发 transform: scale(1.05) 或 opacity: 0.9 时，#tooltip 突然被盖住了。
根本原因不是 z-index 没写对，而是父元素触发了新层叠上下文：
-
transform、opacity 、<code>filter、will-change等属性会隐式创建独立的 stacking context - 一旦创建，子元素的
z-index只在该上下文内生效，再高也超不出父级边界 - 哪怕子元素写了
z-index: 9999，只要父级上下文本身在全局层级里排第2，它就永远盖不过全局第1的弹窗
让定位元素在动画中“稳住层级”的实操要点
关键不是堆数值，而是控制层叠上下文的生成位置和范围：
- 把需要“始终前置”的元素（如
#tooltip、#cursor-follower）直接挂到下，脱离动画父容器的 DOM 层级 - 确保它自身有明确的定位：
position: fixed或position: absolute，并配z-index: 1000（别用 9999） - 避免给它的父容器（尤其是直接父级）加
transform、opacity、filter——哪怕只是临时 hover 效果，也要评估是否必须加 - 如果必须让父容器动，又得保子元素层级，那就手动提升子元素到更高上下文：给它加
will-change: transform+transform: translateZ(0)，强制浏览器为它单独建合成层
z-index 生效的前提条件常被忽略
很多“层级失效”问题其实卡在最基础一层：
-
z-index对position: static元素完全无效 —— 即使你写了z-index: 100，没加position: relative就等于没写 - 内联元素（如
<span></span>）默认是static，想让它可置顶，必须加position: relative和display: inline-block（否则不占块级空间） - 多个同级卡片用
z-index堆叠时，不要只给 hover 的那张加高值；要统一降其他卡片的z-index，否则旧值残留仍可能遮挡 - 调试时打开 Chrome DevTools → “Layers” 面板，能直观看到哪些元素触发了新 stacking context，比猜快得多
真正难的不是写对 z-index，而是判断它到底在哪个上下文里起作用。动画一加，上下文就变；上下文一变，层级关系就得重理。别依赖“写个大数就完事”，先看结构、再控上下文、最后调数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
