will-change让z-index“失效”实为创建新层叠上下文，将子元素层级限制在该上下文中；触发值包括transform、opacity、scroll-position等，而left、width等不会触发。
will-change 为什么会让 z-index 失效
它不是“让 z-index 失效”，而是悄悄创建了一个新的层叠上下文，把元素锁进自己的 Z 轴小房间——外面的 z-index 值再大，也管不到这个房间里的东西。常见触发写法：will-change: transform、will-change: opacity、will-change: scroll-position，只要浏览器认出这些值，就会提前升层。
典型翻车现场：
- 给弹窗容器加了
will-change: transform，结果里面按钮的z-index: 9999完全压不住父级导航栏 - 轮播图容器设了
will-change: opacity，导致子元素上的backdrop-filter: blur(10px)突然消失（毛玻璃依赖父层叠上下文） - Grid 子项加了
will-change: transform，但只是想动态改grid-column—— 层叠上下文建了，动画却没加速，还白占内存
哪些 will-change 值会意外创建层叠上下文
不是所有 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 或直接删掉该声明。
如何验证是否真建了层叠上下文
别猜，用 Chrome DevTools 实锤：
- 打开 Rendering 面板 → 勾选
Paint flashing：绿色高亮 = 合成层已激活 - 勾选
Layer borders：看到带边框的矩形块，就是独立图层 - 在 Elements 面板里右键元素 → Inspect rendering layers：直接跳转到 Layers 面板，看层级树结构
关键信号：
- 父元素没设
position或z-index，但子元素z-index突然“不跨层”了 → 很可能被will-change隔离了 - 用
getComputedStyle(el).zIndex查到是"auto"，但视觉上却盖住了兄弟元素 → 说明它靠的是层叠上下文优先级，不是z-index值
替代方案：要性能，又不想乱建上下文
多数场景下，will-change 是过早优化。先试试更轻量、语义更清晰的替代：
- 动画用
transform: translateZ(0)或transform: scale(1.001)替代will-change: transform—— 同样触发合成，但不带“预约式开销” - 需要毛玻璃或混合模式时，用
isolation: isolate显式隔离，比靠will-change更可控 - Grid/Flex 布局中控层级，优先用 DOM 顺序 +
grid-row错位，或用伪元素::before+z-index: -1打底 - 真要高频动画？把动效元素提为
position: absolute，再加transform，此时will-change: transform才有实际收益
移动端尤其注意：iOS Safari 在 15.4 之前对 will-change 在 Grid 子项上的解析不稳定，容易闪屏或错位，能不用就不用。
真正难处理的，从来不是“怎么加 will-change”，而是“加完之后，谁在哪个层叠上下文里、谁又能影响谁”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
