grid-container 触发隐式层叠上下文导致 z-index 失效，因其加了 transform、opacity 或 filter；grid-item 的 z-index 不生效因默认 position: static，需设 position: relative 激活。
grid-container 触发了隐式层叠上下文，z-index 失效
给 .grid-container 加了 transform、opacity 或 filter（哪怕值是 none 或 1），它就会悄悄创建一个新的层叠上下文。此时所有子项的 z-index 都被“锁”在这个上下文里，再大的值也盖不过外部同级元素——这不是你写错了，是浏览器按规范渲染的结果。
验证方法：在 DevTools 中执行 getComputedStyle(gridContainer).transform 和 getComputedStyle(gridContainer).opacity，只要不是默认值（none / 1），就极可能已触发。
- 若无需这些视觉效果，直接删掉对应属性
- 若必须保留（比如要用
opacity: 0.99做抗锯齿），就把需要前置的元素移出.grid-container，挂到body下，用position: fixed+ JS 同步位置（注意监听scroll和resize） - 避免在容器上同时设
z-index和transform，尤其translateZ(0)这类“伪硬件加速”，容易引发 Safari 渲染闪烁
grid-item 的 z-index 不生效，因为没定位上下文
z-index 只对 position 为 relative、absolute、fixed 或 sticky 的元素起作用。而网格项默认是 position: static，不构成定位上下文——所以即使写了 z-index: 999，也等于没写。
修复只需一行：
.grid-item {
position: relative;
}
- 不需要加
top/left等偏移，position: relative本身就能激活z-index - 不要给同一元素同时设
place-self和position: absolute，后者会让前者失效，还可能造成对齐错乱 - 如果网格项内含图片或文本流，建议额外加
min-height或overflow: hidden，防止悬停时内容撑开导致层叠顺序意外变化
多个 grid-item hover 时互相遮挡顺序错乱
CSS Grid 中，网格项默认按 DOM 顺序堆叠：HTML 里靠后的项，会自然盖住前面的项。当多个项同时 :hover，如果它们都设了相同 z-index，浏览器就按源顺序决定谁在上——这常导致“想突出的项反而被盖住”。
- 给
:hover状态单独提级：.grid-item:hover { z-index: 100; }，确保它高于其他未悬停项（默认z-index: auto） - 避免所有项都设固定高
z-index（如全写z-index: 1），这会让悬停态失去相对优势 - 如果布局允许，可配合
margin-bottom: -Xpx抵消高度增长，减少因尺寸变化引发的重排干扰（参考负外边距抵消方案）
绝对定位的 grid-item 错位，实际锚点不是 Grid 轨道
当某个网格项设了 position: absolute，它的 top/left 并不是相对于 Grid 行列线计算的，而是找最近的“定位祖先”。而默认情况下，.grid-item 是 static，不构成定位上下文，于是它一路往上找到 .grid-container 甚至更外层——结果就是位置飘移。
正确做法是让该网格项自己成为锚点：
.grid-item.special {
position: relative;
}
.grid-item.special > .abs-child {
position: absolute;
top: 8px;
left: 8px;
}
- 不用改
.grid-container的position，避免影响整个网格流 - 显式设置
position: relative后，.abs-child的坐标系就锁定在该项内部，与 Grid 轨道对齐可控 - 慎用
inset配合grid-column名称做动态定位，需 JS 读取getBoundingClientRect()才能精确对齐，维护成本高
opacity: 0.99 触发层叠上下文，或 position: static 下死活不认 z-index。动手前先用 DevTools 看 computed style，比盲调快得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
