要视觉重叠，需确保grid-column和grid-row的轨道范围存在交集；仅写起点等价于起点/起点+1，终点错误会导致元素消失；负值从末尾计数；父容器轨道线不足或gap干扰、z-index未配合position使用、脱离Grid布局等均会导致重叠失效。
grid-column 和 grid-row 的起止值怎么写才真正重叠
两个元素要视觉重叠，必须让它们的网格轨道范围存在交集。只写起点（如 grid-column: 2）看似简单，但等价于 2 / 3，容易误判实际占位；而写错终点会导致区域为零宽/零高，元素直接消失。
-
grid-column: 2 / 4和grid-column: 3 / 5→ 交集是第 3、4 列，必然重叠 -
grid-row: 1 / -1+grid-column: 1 / -1→ 覆盖整个容器，适合全屏遮罩层 - 避免
grid-row: 2 / 2或grid-column: -1 / -1→ 宽度或高度为 0，元素不可见 - 负值从末尾计数：
grid-column: -2 / -1是倒数第二列，不是“从右往左第 2 列”
为什么写了相同 grid-row/grid-column 还不重叠
常见原因是父容器没定义足够多的轨道线，或者 gap 干扰了线号计算。Grid 线号是按显式声明的 grid-template-rows 和 grid-template-columns 生成的，gap 不产生新线号，也不移动已有线号。
- 如果只写了
grid-template-columns: 1fr 1fr，那只有 3 条列线（1 / 2 / 3），grid-column: 4 / 5就越界，回退到 auto-placement - 用 Chrome DevTools Layout 面板勾选 “Show line numbers”，能直观看到每条线的实际编号
- 动态插入元素时，别依赖
grid-column: span 2想当然跨两列——若当前行只剩一列空间，它会换行，不再重叠
z-index 在行列重叠下为何还是没反应
重叠本身由 grid-row/grid-column 实现，但谁在上、谁在下，仍取决于层叠规则：DOM 顺序 + 定位状态 + z-index。只要没加 position，z-index 就是摆设。
- 错误写法：
.overlay { z-index: 10; }→ 默认position: static，z-index 被忽略 - 正确写法：
.overlay { position: relative; z-index: 10; }→ 激活层叠能力，不破坏 Grid 布局 - 别用
position: absolute单纯为了启用 z-index —— 它会让元素脱离 Grid 轨道，grid-column等属性失效 - 多个重叠项都在同一 Grid 容器内时，z-index 只在它们之间比较；若一个元素在另一个 Grid 容器里，z-index 彼此不可比
调试重叠布局最有效的三件事
重叠问题难在“看不见却存在”，靠肉眼很难判断是否真重叠、谁压谁、为什么没生效。优先用工具和视觉线索定位，而不是反复改 CSS。
立即学习“前端免费学习笔记（深入）”；
- 给每个重叠元素加临时
outline: 2px solid red或不同背景色，一眼看出边界和交集区域 - 在 DevTools 中打开 Layout → Show grid lines + Show area names，确认轨道线编号和命名区域是否匹配
- 检查 Computed 面板里目标元素的
position值是不是static，以及z-index是否被标记为 “not applicable”
position，或 DevTools 里没打开的网格可视化开关。 
