要控制Grid元素层叠需先设置position再用z-index，DOM顺序决定默认堆叠，父容器创建层叠上下文时内部z-index受限，可通过负margin实现视觉重叠。
在使用CSS Grid布局时，元素重叠是常见需求，比如卡片叠加、模态框覆盖等。要控制Grid中元素的层叠顺序，关键在于理解z-index与Grid容器自身的层叠上下文关系。只要掌握几个核心规则，就能轻松实现精准控制。
Grid项目默认层叠顺序
Grid容器内的子元素（Grid项目）会按照它们在HTML中的书写顺序进行层叠。后出现的元素自然覆盖前面的元素，这和普通定位元素类似。
即使通过grid-column或grid-row将多个项目放置到同一网格区域，它们依然遵循这个默认堆叠顺序。
- 未设置
z-index时，DOM顺序决定谁在上层 - Grid项目自动成为堆叠上下文的一部分
- 浮动、定位元素不会打断Grid的层叠逻辑
使用Z-index控制重叠层级
若想打破默认顺序，必须为Grid项目显式设置position属性或直接使用z-index。注意：只有成为定位元素（如position: relative）后，z-index才会生效。
示例：
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
background: red;
}
.item-2 {
grid-column: 2 / 4;
grid-row: 2 / 4;
background: blue;
position: relative;
z-index: 1;
}
尽管item-1在HTML中靠前，但由于item-2设置了z-index: 1并带有position: relative，它会显示在上方。
创建独立的层叠上下文
当Grid容器本身设置了transform、opacity、filter或z-index（配合position）时，会形成新的层叠上下文，其内部项目的z-index仅在容器内有效。
这意味着：一个内部高z-index的子元素仍可能被外部其他容器的内容遮挡。
利用Grid轨道间隙与负边距实现视觉重叠
除了z-index，还可以通过调整项目位置实现部分重叠效果。例如使用负margin或精确的grid-area定义让项目交叉。
这种方法适合不需要改变层叠顺序的轻微交叠设计。
-
margin: -10px可使相邻项目相互覆盖边缘 - 配合
z-index微调哪个元素在上更灵活 - 响应式场景下建议用
gap结合z-index控制
基本上就这些。Grid中的重叠控制不复杂，但容易忽略定位与z-index的关系。只要记住：想改层级，先加position，再设z-index，同时留意父容器是否创建了独立堆叠环境。
