核心回答
先记住这个答案
Grid 允许多个项目占同一块区域。给图片、遮罩和标题都写 grid-area: hero，它们会共享区域边界，从而叠在一起；也能分别给它们相同的 grid-row 与 grid-column。重叠只解决几何位置，视觉上下顺序要看层叠规则，交互是否被覆盖层截获还要单独确认。
- 相同
grid-area可形成重叠 - 相同行列线也能形成重叠
- 网格项目可用
z-index控制层级 - 视觉叠放不改变 DOM 顺序
相同线坐标也能实现
命名区域不是必须条件。只要两个项目都写 grid-row: 1 / 2 与 grid-column: 1 / 2，它们就进入同一个网格单元。需要部分重叠时，可让一个项目跨两列，另一个只占第二列。这样能做悬浮标签或图片角标，但区域的轨道尺寸仍由项目内容和模板共同决定。
重叠项目可能增加轨道的最小尺寸贡献。比如标题不换行且很长，就可能把 hero 轨道撑宽；可以给轨道设可收缩下限，并对文字作换行处理。重叠布局不会自动裁剪超出的内容，也不会自动设置透明度。
重叠时还要分清“谁画在上面”和“谁接收事件”。图片、遮罩和标题同占 hero 区域，后面的项目在相同层级下通常画在前面的上方；项目使用 z-index 后又按层叠规则排序。若遮罩是装饰层，给它 pointer-events: none 可以避免挡住按钮，但标题和按钮仍要保证文字对比度、焦点可见。开发工具的网格覆盖层只显示布局重叠，不会替你检查点击命中和键盘导航。
回答前，多想一步
容易答错的地方
- 认为后一个项目会被自动放到下一格
- 相同区域属于显式定位，两个项目可以共处。自动放置规则不会替你避开指定的重叠。
- 以为
z-index可以修复点击顺序 - 它主要解决绘制层级。覆盖层仍可能截获指针，键盘焦点仍按 DOM 顺序走，交互要另查。
试着用自己的话回答
面试官还会怎么问？
Grid 项目不写 position 也能用 z-index 吗？
可以，网格项目的层叠顺序可由 z-index 控制，不必为了它先写 position: relative。
两个项目共用区域会合并成一个 DOM 元素吗？
不会。它们仍是独立节点，只是在布局中共享网格区域。
为什么遮罩挡住了按钮？
遮罩处于按钮上方且接收指针事件；应调整层级或让纯装饰遮罩不接收指针。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。