使用CSS Grid布局时，很多奇怪的表现都与层叠上下文有关：明明给某个子元素设置了很高的z-index，它还是被旁边的元素盖住；或者两个网格项在视觉上重叠了，想调整谁在上谁在下却毫无效果。其实Grid布局中每个网格项默认处于同一个层叠环境中，一旦某些元素创建了新的层叠上下文，z-index的作用范围就会发生变化。本文将从原理到实操，完整讲解如何在Grid布局下正确处理子元素覆盖问题。
一、先弄懂：为什么z-index会失效
z-index并不是全局排序，它只在同一个层叠上下文（stacking context）内比较。根元素html会创建一个层叠上下文，而以下几种常见情况会创建新的层叠上下文：position值为absolute或fixed且z-index不为auto、opacity小于1、transform不为none、filter不为none、设置了isolation:isolate，以及Grid或Flex容器的直接子元素设置了z-index（即使没有定位属性）。
注意最后一条：Grid布局的子元素即使没有设置position，只要给了z-index，它自身就会创建层叠上下文。这意味着它的子元素无论z-index多高，都无法跳出这个上下文与外部元素比较。举个例子，卡片A内部有个弹层设置了z-index:9999，但卡片A本身被设置了z-index:1，而卡片B设置了z-index:2，那么卡片A内部的弹层永远显示在卡片B之下。
.card {
display: grid;
}
/* 卡片A设置了z-index:1，创建了独立的层叠上下文 */
.card-a {
z-index: 1;
}
/* 卡片B层级更高 */
.card-b {
z-index: 2;
}
/* 无论这个弹层z-index多高，都受限于父级card-a */
.card-a .popup {
z-index: 9999; /* 仍然被card-b盖住 */
}排查方法很简单：打开浏览器开发者工具，在Computed面板中查看Layer或层叠信息；或者在Elements面板中逐级检查父元素，凡是触发了上述任一条件的元素，都会把子元素的z-index限制在自己的作用域内。解决办法通常有两个：要么去掉父元素上不必要的层叠上下文属性（比如去掉transform或z-index），要么把需要置顶的元素用更高层级的父级包裹或移出当前上下文。
二、用z-index在Grid容器内正确分层
如果所有网格项都在同一个Grid容器内，且没有父级干扰，那么直接给它们设置z-index就能控制覆盖关系，这比传统的相对定位加z-index更简洁，因为Grid子元素无需position属性即可响应z-index。
典型的场景是背景层与内容层分离：让一个网格项铺满整个容器作为背景（比如图片或渐变），另一个网格项放置文字内容，通过z-index确保文字在上。此时需要用到grid-area让两个元素占据同一片区域，否则它们会各占一格，不会产生视觉重叠。
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 200px;
}
/* 背景项跨满整个容器 */
.bg {
grid-area: 1 / 1 / 2 / 3; /* 从行1列1到行2列3 */
z-index: 1;
}
/* 内容项与背景重叠在同一区域 */
.content {
grid-area: 1 / 1 / 2 / 3;
z-index: 2;
}这里的关键技巧是：多个网格项可以声明相同的grid-area，它们会天然重叠在同一位置，此时z-index才真正派上用场。如果不设置z-index，则按DOM顺序决定层级，后出现的元素在上。因此即使不用z-index，也可以通过调整HTML中元素的先后顺序来控制覆盖关系，这在一些动态列表场景中很有用，避免依赖额外的样式。
三、用grid-template-areas规划命名区域，让分层更直观
当布局复杂时，直接写行号（如1 / 1 / 2 / 3）可读性较差。可以改用命名区域的方式，先用grid-template-areas给每块区域起名字，再让不同元素指向同一个命名区域实现重叠。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"hero hero"
"side main";
}
/* 背景图与遮罩层都占据hero区域 */
.hero-bg {
grid-area: hero;
z-index: 1;
}
.hero-mask {
grid-area: hero;
z-index: 2;
background: rgba(0, 0, 0, 0.5);
}
.hero-title {
grid-area: hero;
z-index: 3;
color: #fff;
}这种写法的优势一目了然：背景、遮罩、标题三层都锚定在hero区域上，代码即文档。要注意grid-template-areas中的区域必须是矩形，不能出现L形，否则整条声明会被浏览器忽略。
另一种思路是不让元素重叠，而是利用负margin制造视觉溢出。比如一个卡片头像需要突出到卡片边界之外，可以在Grid布局中先给头像预留位置，再用margin-top: -30px把它往上顶出去，同时配合z-index保证它不被相邻元素遮挡。这种方式适合局部的"破格式"设计，不会破坏整体的网格结构。
四、常见踩坑案例与排查清单
第一个坑：父容器设置了transform做动画，导致内部弹层被外部元素盖住。解决方案是动画结束后移除transform（设回none），或者干脆把弹层挂到body下再定位。第二个坑：给包装器设置了opacity: 0.99来做硬件加速，这同样会创建层叠上下文，属于隐蔽的老问题，建议用will-change替代。第三个坑：重复的grid-area没有设置z-index，以为布局错了，实际上是DOM顺序决定了覆盖关系。
排查时建议按这个顺序检查：确认参与的元素是否是同一个Grid容器的直接子元素；逐级检查父链上是否存在transform、opacity、filter、isolation等属性；确认z-index数值只在同层级之间比较；最后用开发者工具的3D视图或Layers面板验证实际的渲染层级。掌握这套思路后，Grid布局中的覆盖问题基本都能快速定位并解决。