Grid层叠需先用grid-area或grid-row/grid-column使元素占据同一网格区域，再用z-index控制顺序；未设z-index者按DOM顺序堆叠；注意避免transform等截断层叠上下文及IE兼容性问题。
Grid的grid-area和z-index怎么配合实现层叠
绝对定位层叠靠position: absolute + z-index，Grid层叠本质一样，但控制逻辑更结构化：先用grid-area把元素放进同一个网格单元，再用z-index决定谁在上。
常见错误是只设grid-area却忘了给重叠元素显式设置z-index——Grid容器默认不创建层叠上下文，同级子项的z-index直接生效，但若父容器有transform或opacity等属性，可能意外截断层叠顺序。
-
grid-area值必须一致（如都设为"main"），且对应容器中已定义该命名区域 - 多个元素叠在一起时，
z-index大的显示在上；未声明z-index的按DOM顺序堆叠（后出现的在上） - 避免在Grid容器上滥用
transform，否则子项z-index可能失效
示例：
.container {
display: grid;
grid-template-areas: "main";
}
.box1 { grid-area: main; z-index: 2; }
.box2 { grid-area: main; z-index: 1; }
用grid-row/grid-column手动指定重叠位置
比grid-area更底层、更灵活的方式：直接让多个元素占据同一行/列范围。适合动态生成内容或不想提前定义命名区域的场景。
容易踩的坑是行列起止值写反，比如grid-row: 1 / 1不会占满整行，而是无效（需至少两个不同值）；另外，span语法虽方便，但跨轨道时若轨道尺寸不固定，可能导致重叠错位。
立即学习“前端免费学习笔记（深入）”；
-
grid-row: 1 / -1让元素从第1行开始，延伸到最后一行线（含隐式行） - 想精确覆盖某块区域，优先用
grid-row: 2 / 3而非grid-row: 2 / span 1，后者依赖轨道高度计算 - 如果父容器
grid-auto-rows设为minmax(100px, auto)，用span可能让重叠区域高度不可控
Grid层叠 vs 绝对定位：哪些情况不能直接替换
Grid能替代大部分静态层叠需求，但遇到以下情况，硬切会增加复杂度甚至失败：
- 需要响应式偏移（如
top: 10%随视口缩放实时变化）——Grid坐标系基于轨道，不支持百分比偏移计算 - 元素需脱离文档流影响其他布局（如悬浮提示框撑开父容器）——Grid子项始终参与网格布局，无法真正“脱离”
- 动画目标是
top/left连续变化——Grid不支持grid-row动画，只能靠transform模拟，此时z-index管理反而更麻烦
简单说：静态、结构明确、不依赖视口比例的层叠，Grid更干净；动态、需精细位移或独立于布局流的，留着position: absolute更实在。
兼容性与性能提醒
Grid层叠在Chrome 57+/Firefox 52+/Safari 10.1+都支持z-index，但IE完全不支持——如果还要兼容IE，别试图用Grid模拟绝对定位层叠，徒增hack成本。
性能上，Grid本身无渲染负担，但频繁修改grid-row/grid-column会触发样式重计算；相比transform动画，它不是GPU加速的，大量元素同时重排可能卡顿。
真正容易被忽略的是：Grid层叠依赖容器的display: grid上下文。如果中间某层被display: contents或display: none打断，子项的grid-area会失效——这种断裂比绝对定位的层级丢失更难排查。
