will-change 会悄悄创建新层叠上下文，因为它触发浏览器为元素新建独立的z轴空间，而非使z-index失效；仅对transform、opacity、scroll-position、contents等可合成属性生效，left/top等布局属性无效且有害。
will-change 为什么会悄悄创建新层叠上下文
它不是“让 z-index 失效”，而是直接给元素新建了一个独立的层叠上下文（stacking context），把整个子树锁进自己的 Z 轴空间里。外面的 z-index 值再大，也影响不到这个新房间里的内容。
触发条件很明确：只要 will-change 的值是浏览器认定“能独立合成”的属性，就会升层。实操中真正会建上下文的只有这几个：
-
will-change: transform（含translate、scale、rotate等） will-change: opacitywill-change: scroll-position-
will-change: contents（极少用）
而这些不会触发：
-
will-change: left/will-change: top -
will-change: width/will-change: height will-change: background-color
注意：will-change: auto 无效；will-change: unset 不会清除已有上下文，得用 will-change: initial 或直接删掉声明。
怎么确认是不是被 will-change 隔离了
别靠猜，用 Chrome DevTools 实锤：
- 打开 Rendering 面板 → 勾选 Layer borders：看到带边框的矩形块，就是独立图层
- 勾选 Paint flashing：绿色高亮 = 合成层已激活
- 在 Elements 面板右键元素 → Inspect rendering layers：直接跳转到 Layers 面板看层级树
典型信号：
- 父元素没设
position或z-index，但子元素突然“压不住”兄弟节点了 -
getComputedStyle(el).zIndex返回"auto"，但视觉上却盖住了其他元素 → 说明靠的是层叠上下文优先级，不是z-index值
想动画又不想乱建上下文，怎么办
多数场景下，will-change 是过早优化。先试试更轻量、副作用更小的替代方案：
- 用
transform: translateZ(0)或transform: scale(1.001)替代will-change: transform—— 同样触发合成，但不带“预约式开销” - 动画开始前动态加：
element.style.willChange = 'transform' - 动画结束后立刻清：
element.style.willChange = 'auto'（空字符串''会被忽略） - 避免写死在 CSS 里，比如
.moving { will-change: transform; }—— 长期挂着会导致图层驻留、内存泄漏
特别注意：如果父容器有 overflow: hidden、filter、mask 等属性，可能直接剪裁或阻断合成，will-change 就白加了。
为什么 will-change: left 没用还坏事
left、top 这类属性触发 layout，浏览器必须重排。加 will-change: left 不会让它变合成属性，反而多建一层、多占内存、还可能干扰原有布局流。
真正起效的前提是：动画本身必须基于 transform 和 opacity，且元素已处于独立图层中。所以正确路径是：
- 先把
left: 100px改成transform: translateX(100px) - 再配合
will-change: transform（临时加） - 禁用所有 layout 触发属性（
width、height、top、bottom等）
最常被忽略的一点：will-change 是“预告”，不是“加速器”。它解决的是首帧延迟，不是主线程卡顿。如果 JS 在疯狂操作 DOM 或 layout，加再多 will-change 也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
