grid项z-index生效需先创建层叠上下文：必须设置position（如relative）且z-index不为auto，或用will-change/opacity/transform等触发；单纯改grid-column等布局属性时will-change无效；优先用dom顺序、轨道错位或伪元素控制层级。
grid容器里z-index不生效？先确认是否创建了层叠上下文
Grid 项的 z-index 只在自身建立了层叠上下文时才真正起作用，否则它只影响 grid 轨道内的绘制顺序，不穿透到父容器外。常见错误是给子元素加了 z-index 却没配 position 或触发属性，结果层级完全没变。
- 必须满足：该 grid 项有
position值（relative、absolute、fixed等），且z-index不为auto - 或使用
will-change: transform/will-change: opacity等主动触发层叠上下文（但仅限支持该属性的浏览器） - 注意：
opacity: 0.99或transform: translateZ(0)也能触发，但属于“副作用式”方案，语义不清且可能干扰动画逻辑
will-change 对 grid 子项变换渲染的优化效果很有限
很多人以为给 grid 项加 will-change: transform 就能加速 grid-template-areas 切换或 grid-column 动画，其实不然——will-change 只对**已启用硬件加速的单个属性变更**有效，而 grid 布局计算本身属于 Layout 阶段，GPU 不参与。
- 真正受益的场景只有：对某个 grid 项做频繁
transform动画（如平移缩放），且该元素已脱离文档流（position: absolute） - 若只是动态修改
grid-column-start或grid-area，will-change几乎无用，反而可能因强制提升图层导致内存占用上升 - Chrome DevTools 的 “Rendering” 面板里勾选 “Paint flashing”，能看到
will-change是否真让元素变成独立合成层（绿色高亮）
grid 布局中更可靠的层级控制方式
比起硬靠 z-index 和 will-change 拼凑，直接利用 grid 自身的绘制顺序和结构更稳定。
- grid 项默认按 DOM 顺序堆叠，后出现的元素自然盖在前面元素上 —— 所以调整 HTML 顺序比调
z-index更直接 - 用
grid-row/grid-column错开轨道位置，避免重叠，从根本上消除层级争端 - 需要局部遮罩时，用伪元素
::before+z-index: -1或isolation: isolate显式隔离层叠上下文，比依赖子项自己建上下文更可控
移动端 Safari 对 will-change + grid 的兼容性要特别小心
iOS 15.4 之前，Safari 对 will-change 在 grid 容器内子项上的解析不稳定，尤其配合 transform 动画时容易触发闪烁或错位，不是 bug 是未实现。
- 测试时务必在真机上验证，模拟器不可靠
- 回避写法：
will-change: transform+grid-column: span 2动态切换 → 改用transform: translateX()配合固定轨道位置 - 如果必须用
will-change，只在用户交互开始前一刻设置（比如mouseenter时加 class），交互结束立即移除，减少持续开销
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
