grid-item 的 z-index 无效是因为其 position 默认为 static，需设为 relative/absolute/fixed/sticky 才生效；要沉底须统一同级定位上下文并设目标项 z-index: -1、其余 ≥0。
grid-item 的 z-index 为什么无效？
直接给 .grid-item 设置 z-index 却没效果，是因为它默认没有定位上下文。CSS 中 z-index 只对「已定位元素」生效——即 position 值为 relative、absolute、fixed 或 sticky 的元素。
Grid 项即使被自动分配到某个格子，其 position 默认仍是 static，此时 z-index 被浏览器忽略（DevTools 里会显示为灰色划掉）。
- 必须显式添加
position: relative（最常用且安全） - 避免用
position: absolute，否则脱离网格流，grid-row/grid-column失效 - 如果已有其他定位逻辑（如动画 transform），
position: relative仍是最小侵入性选择
如何让某个 grid-item 真正沉到底层？
“最底层”不是靠负数 z-index 硬压，而是确保它在**同级定位元素中层级最低**。关键在于统一所有相关项的定位上下文和层级基准。
- 给所有可能参与层叠的网格项都加上
position: relative - 目标项设
z-index: -1（注意：不能是0，因为未设置z-index的定位元素默认属于z-index: auto，其层叠顺序不等于0） - 其他项至少设
z-index: 0或更高，形成明确层级差 - 不要依赖父容器的
z-index去压制子项——子项的层叠上下文由其自身position+z-index决定
为什么有时 z-index: -1 还是被盖住？
常见于嵌套结构或隐式层叠上下文干扰。例如：
- 父容器设置了
transform、opacity 或will-change，会创建新的层叠上下文，导致子项的z-index只在该上下文内有效 - 目标项被包裹在另一个
position: relative的里，而外层容器本身有z-index: 1，那整个子树都被抬高了- 使用了
grid-template-areas配合命名区域，但某区域容器自己带z-index，会覆盖内部项的层级控制排查时打开 DevTools 的 Layers 面板，看是否意外触发了新层叠上下文。
替代方案：用 order 属性“视觉下沉”
如果目标只是让某个项在视觉上排在最后（比如作为背景装饰），且不需要真正穿透其他内容，
order更轻量、无定位副作用：- 给网格容器设
grid-auto-flow: row（默认值，可省略） - 目标项加
order: 999，其他项保持默认order: 0或设较小值 - 注意：
order影响的是 DOM 顺序渲染层，不改变定位层级，所以不会遮挡/被遮挡，仅控制排列先后 - 适合静态布局；若需动态交互（如 hover 提升层级），仍需走
z-index路线
真正难的不是设一个数字，而是确认所有相关元素是否处于同一层叠上下文、有没有被父级无意提升——这比写对属性更容易被忽略。
- 使用了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
