子元素重叠可通过grid-area和z-index控制，1. 使用grid-area明确划分位置避免意外重叠；2. 通过z-index设置定位元素的层叠顺序；3. 推荐命名网格区域并合理使用DOM顺序与定位实现清晰分层。
在使用CSS网格布局时，子元素重叠可能是有意为之的设计，比如卡片叠加、模态框覆盖等；也可能是无意的布局错误。无论是哪种情况，都可以通过 z-index 和 grid-area 来合理控制层叠顺序与位置，实现清晰的分层效果。
理解重叠的成因
网格布局中子元素重叠通常是因为：
- 多个子元素被分配到相同的网格区域
- 使用了 grid-column 或 grid-row 指定范围时发生交叉
- 设置了 position: absolute 脱离正常流
浏览器会按照DOM顺序默认堆叠，后面的元素覆盖前面的。若要精确控制，就需要介入 z-index 与布局定义。
使用 grid-area 精确分配位置
grid-area 可以明确指定元素占据的行和列，避免意外重叠。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 200px;
}
.item1 {
grid-area: 1 / 1 / 3 / 2; /* 占据第1-2行，第1列 */
}
.item2 {
grid-area: 2 / 1 / 3 / 3; /* 占据第2行，第1-2列 */
}
通过明确划分区域，可以减少元素交叉。如果确实需要重叠，也能清楚知道哪些元素会交集。
用 z-index 控制层叠顺序
即使元素在网格中重叠，也可以通过 z-index 决定谁在上层。注意：z-index 只对定位元素生效（即设置了 position 的元素）或 contain: paint 的元素有效。
.item1 {
grid-column: 1 / -1;
grid-row: 1 / 3;
position: relative;
z-index: 1;
}
.item2 {
grid-column: 2 / 4;
grid-row: 2 / 3;
position: relative;
z-index: 2; /* 覆盖 item1 */
}
这样即使两个元素在视觉上重叠，也能通过 z-index 明确层级关系。
实用建议：设计分层结构
对于复杂的网格界面（如仪表盘、卡片墙），推荐做法是：
- 用 grid-area 命名关键区域（如 header、sidebar、main）
- 为需要浮起的元素（弹窗、提示）设置 position: relative 和较高的 z-index
- 避免给所有元素都设 z-index，防止层叠混乱
- 利用 DOM 顺序作为默认层叠基础，必要时再调整
基本上就这些。掌握 grid-area 定位和 z-index 分层，就能从容应对网格中的重叠问题，让布局既灵活又可控。
