CSS中的网格布局（Grid Layout）网格项重叠与z-index控制详解

描述
网格项重叠是CSS Grid布局中的一个重要特性，当多个网格项被放置到同一个网格单元或区域时就会发生重叠。理解如何控制这些重叠项目的层叠顺序对于创建复杂布局至关重要。这与传统的z-index层叠控制有所不同，因为网格项在网格容器内形成了独立的层叠上下文。

基本重叠现象

1. 当多个网格项被明确放置到相同的网格轨道时，后出现的网格项会覆盖在先出现的网格项之上
2. 这种重叠不是bug，而是Grid布局的固有特性，可以用于创建视觉层次

示例代码演示基础重叠

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.item1 {
  grid-column: 1 / 3;  /* 跨越第1到第3列线 */
  grid-row: 1;
  background-color: red;
}

.item2 {
  grid-column: 2;
  grid-row: 1 / 3;  /* 跨越第1到第3行线 */
  background-color: blue;
  opacity: 0.8;  /* 用于观察重叠效果 */
}

z-index控制层叠顺序

1. 默认情况下，HTML中后出现的网格项会覆盖先出现的项
2. 通过z-index属性可以改变这种自然层叠顺序
3. 网格项可以接受任何整数值的z-index（正数、负数、零）

z-index使用规则

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: red;
  z-index: 1;  /* 将此项置于上层 */
}

.item2 {
  grid-column: 2;
  grid-row: 1 / 3;
  background-color: blue;
  z-index: 0;  /* 将此项置于下层 */
}

网格容器的层叠上下文

1. 网格容器会创建新的层叠上下文
2. 网格项的z-index只在该容器的层叠上下文中有效
3. 网格项的子元素也会受到这个层叠上下文的影响

复杂层叠控制示例

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  position: relative;  /* 建立层叠上下文 */
}

.item1 {
  grid-area: 1 / 1 / 3 / 3;  /* 使用grid-area简写 */
  z-index: 2;
}

.item2 {
  grid-area: 2 / 2 / 4 / 4;
  z-index: 1;
}

.item3 {
  grid-area: 1 / 2 / 2 / 3;
  z-index: 3;  /* 最高层级 */
}

实际应用场景

1. 创建交错的卡片布局
2. 实现重叠的图像和文字效果
3. 构建复杂的仪表板界面
4. 制作层叠的导航菜单

注意事项

1. z-index只对定位元素（position非static）或网格项有效
2. 网格项自动获得类似position: relative的层叠特性
3. 过度使用z-index可能导致层叠顺序难以维护
4. 建议使用有意义的z-index值（如1, 2, 3）而不是随意的大数值

通过合理运用网格项重叠和z-index控制，可以创建出富有层次感和视觉深度的布局效果，这是Grid布局相比其他布局方法的独特优势之一。