CSS Grid 中如何利用网格区域实现重叠布局？

网格区域重叠的底层机制

CSS Grid 的定位模型中，每个网格项都被放置到一个矩形网格区域，该区域由四条网格线围成。grid-template-areas 通过字符串为每个命名区域分配一组单元格，而 grid-area 属性则可将项绑定到某个命名区域。当多个项绑定到同一命名区域时，它们被解析为相同的起始线和结束线，所以占据的空间完全一致，产生重叠。这种重叠不同于 position，它不脱离文档流，网格轨道尺寸仍由内容的最大值决定。

另一种途径是使用基于行号或命名线的放置。例如，三项都设置 grid-column: 2 / 4 和 grid-row: 1 / 2，它们会共享同一组轨道。注意只有网格项之间才能形成这种重叠，网格容器内的非子元素无法参与。重叠本身并不创建层叠上下文；若都不设置 z-index，渲染顺序按 DOM 顺序，后写的覆盖先写的。设置了 z-index 时，正的 z-index 高于默认层，auto 与 0 同层且按 DOM 顺序，负 z-index 低于默认层；更大的正的 z-index 在上。

构建一个带背景水印的卡片

假设需要实现一个卡片，底部有一个半透明的品牌标识图形，上面覆盖文字内容，且两者共同占据卡片区域的同一网格范围。容器设置为 grid-template-areas: "card"，只占一个单元格。图形元素和文本元素均设置 grid-area: card。图形使用深色背景和较低的透明度，默认在DOM中位于文本之前，文本会覆盖在其上。若要调整，比如让图形完全盖住文本（如遮罩），可增加图形的 z-index 并设置适当透明度。

工程中常遇到动态层序的需求，例如点击时某个重叠项需要浮到最上层。做法是给所有重叠项预设 z-index 层级，通过切换类名改变某项的 z-index。这种方式比依赖 order 或移动DOM更直接，因为 order 只改变网格项的排序，不影响层叠顺序（除非结合 z-index）。但需注意只有定位或网格项才能用 z-index，而CSS Grid项默认就是可用的，无需额外设置 position: relative。

重叠布局的失效条件与处理

重叠不一定总是完全覆盖。例如，如果一个项通过命名区域占据跨多行的区域，而另一个项通过网格线只定位到该区域内的一个单元格，那么两项仅在该单元格重叠，而不是整体重叠。设计时需明确区域大小，避免误判。另外，若网格项的内容撑开了轨道，重叠项会一起被撑高，因为共享轨道尺寸由最大内容决定，这可能破坏预期的视觉重叠。

另一个容易失效的情况是：网格项同时有 margin 或 padding，它们会改变项在网格区域内的实际绘制区域，可能产生可见的缝隙或错位。处理时通常将内部元素放入一个包装器，用内边距控制间距，而网格项本身保持零边距以精确对齐。此外，z-index 只在同层叠上下文中有效，如果某个网格项自身创建了层叠上下文（如设置了 opacity 或 transform），其内部元素无法与外部其他网格项比较层级，需要统一在网格项层级设置。

容易答错的地方

重叠必须依赖position定位

误区：需用position: absolute才能让元素重叠。实际上CSS Grid中，只要项被放置到同一网格区域，它们天然重叠，无需任何定位属性，z-index也直接有效。

改变DOM顺序或order就能调整层级

误区：order属性改变网格项在自动放置中的顺序，但不影响层叠上下文。只有z-index（且非auto）才决定重叠项的优先级，同z-index时按DOM顺序。

面试官还会怎么问？

把知识连起来