grid-row垂直重叠的本质是行列范围交集，即起始行线≤对方结束行线且结束行线≥对方起始行线；重叠后dom顺序决定层叠，z-index需配合position才可靠生效。
直接用 grid-row 实现垂直方向重叠，核心不是“拉高某一行”，而是让多个元素的 grid-row 范围产生交集——只要起始行线 ≤ 对方结束行线，且结束行线 ≥ 对方起始行线，就构成重叠。
grid-row 重叠的本质是行列范围交集
Grid 的重叠不依赖高度或定位，只看网格线坐标是否重合。例如：
.item-a { grid-row: 1 / 3; }
.item-b { grid-row: 2 / 4; }
这两个元素在第 2、3 行轨道上完全重叠。注意：grid-row: 1 / 3 占据第 1→2 行之间的轨道（即第 1 行内容区 + 第 2 行内容区），不是“从第 1 行开始、跨 3 行”。
- 错误理解：
grid-row: 2 / 2→ 宽度为 0，元素不可见 - 安全写法：
grid-row: 2 / 3（占第 2 行）、grid-row: 2 / -1（从第 2 行延伸到最后一行） - 倒序写法：
grid-row: -2 / -1（倒数第二行到最后一行），适合响应式场景
重叠后谁在上面？z-index 不是万能的
默认情况下，后出现在 DOM 中的元素层叠顺序更高；z-index 只有在元素已定位（position: relative 或其他非 static）时才生效，且它的优先级低于 DOM 顺序。
- 想稳控顺序：统一加
position: relative，再用z-index显式设值（如z-index: 1和z-index: 2） - 不设
position时，现代浏览器（Chrome 66+、Firefox 61+、Safari 11.1+）仍支持z-index对 Grid 子项生效，但行为不一致，建议不依赖 - 避免混用：不要一个元素设
position: relative，另一个保持static，否则z-index失效逻辑难预测
常见踩坑：负 margin 不是用来“制造重叠”的
有人误以为用 margin-top: -20px 就能让元素上移重叠——这确实能造成视觉覆盖，但会破坏网格轨道计算，导致后续行被推挤或错位，尤其在 hover 动态变化时极易抖动。
- 真正该用负 margin 的场景：hover 时高度增加，用
margin-bottom: -Xpx抵消撑开效果，维持网格结构稳定 - 若目标是“让 item-b 垂直盖住 item-a 的下半部分”，正确做法是让两者
grid-row范围交叠，而非靠 margin 拉扯 - 内容溢出风险：重叠区域若含文字或图片，需配合
overflow: hidden或min-height防止布局意外膨胀
最关键的细节往往藏在行线编号里：网格线从 1 开始正向计数，-1 是末尾线，但 grid-row: 1 / -1 并不等于 “所有行”，它等价于显式写出全部轨道范围；如果容器行数动态变化（比如由 grid-auto-rows 生成），-1 才真正指向“最后一行线”。这点在 JS 动态插入元素或响应式断点切换时最容易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
