z-index: -1在grid容器中不生效，因grid容器默认非定位上下文且同网格项内无法跨项控制层级；需用伪元素+position: absolute并设父容器position: relative才有效。
为什么z-index: -1在Grid容器里不生效
直接给背景图元素设 z-index: -1 通常没用，因为 Grid 容器默认不是定位上下文（position 不是 relative、absolute 等），z-index 对非定位元素无效。更关键的是，如果图片和内容同属一个网格项，它们天然处于同一层叠上下文，z-index 无法跨网格项控制层级——除非你主动创建新的层叠上下文。
正确做法：用伪元素::before + position: absolute
最稳妥的方式是把背景图交给容器的伪元素，让它脱离文档流并铺满整个 Grid 区域：
.grid-container {
position: relative; /* 创建定位上下文 */
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<p>.grid-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
z-index: -1; /<em> 此时有效，因父容器已定位 </em>/
}</p>
- 必须给
.grid-container加position: relative，否则::before的absolute会向上找最近定位祖先，可能错位 - 不要用
background直接写在容器上——那样无法单独控制缩放、定位或过渡效果 - 如果 Grid 有
gap，伪元素会覆盖 gap 区域；如需避开 gap，改用background配合grid-area分块设置
替代方案：用background + place-items: stretch简化布局
如果只是想让一张图撑满整个 Grid 容器（不含子项内容），且不需要图层叠加控制，直接用 CSS 背景更轻量：
.grid-container {
display: grid;
place-items: stretch; /* 确保子项不干扰背景显示 */
background: url('bg.jpg') center/cover no-repeat;
}
- 这个方法不依赖定位或伪元素，兼容性更好（IE11 也支持）
- 但无法对背景图做独立动画（比如只动图不动内容），也不能用
mix-blend-mode单独作用于背景 - 若子项有背景色或透明度，会遮挡此背景，此时仍得退回伪元素方案
常见翻车点：Grid 子项溢出导致背景被裁切
即使伪元素 z-index: -1 设对了，如果某个网格项设置了 overflow: hidden 或 max-height，它可能把伪元素「剪掉」——因为 overflow 会为后代创建新的层叠上下文和裁剪边界。
- 检查所有子项是否意外带了
overflow: hidden、clip-path或transform（后者在某些浏览器中也会触发新层叠上下文） - 临时加
outline: 1px solid red到伪元素，确认它是否真被裁切了 - 解决办法：把伪元素移到更高层级的父容器上（比如
或 layout wrapper），而非 Grid 容器本身
Grid 的背景控制本质是层叠上下文 + 定位模型的配合，不是单纯调个 z-index 就能搞定。最容易被忽略的是「谁创建了定位上下文」和「谁触发了裁剪边界」，这两处出问题，图就一定盖不住或被砍掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
