如何使用 CSS Grid 实现悬停时元素重叠而不破坏网格布局

通过设置负外边距（margin-bottom: -xpx）配合 z-index，可在保持 grid 布局结构完整的前提下，实现悬停时子元素视觉上重叠下一行内容，避免推挤布局。

在 CSS Grid 布局中，元素默认遵循网格轨道（grid tracks）的尺寸约束，当某个 .grid-item 在交互（如 :hover）时高度增加，浏览器会自动扩展其所在行高，进而影响后续行的位置——这违背了“不推挤其他行”的设计目标。直接使用 position: absolute 虽可脱离文档流实现重叠，但会导致该元素脱离 Grid 的定位体系，破坏列对齐、响应式行为及可访问性，因此不可取。

✅ 正确解法是：利用外边距补偿机制。原理如下：

• 默认状态下，每个 .grid-item 高度由内容与内边距决定（例如 padding: 20px + 字体高度 ≈ ~70px）；
• 悬停时设 height: 90px，即额外增加了约 20–30px 的视觉高度；
• 此时添加 margin-bottom: -60px（数值需根据实际增长量调整），使该元素的外边距区域向上收缩，抵消其向下延伸的空间，从而让后续网格项保持原位置；
• 同时设置 z-index: 100 确保重叠时层级高于相邻项，避免被遮挡。

以下是优化后的完整代码示例（含关键注释）：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px; /* 推荐用 gap 替代 padding，更符合 Grid 语义 */
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  transition: all 0.2s ease; /* 添加过渡更平滑 */
  position: relative; /* z-index 需要定位上下文 */
}

.grid-item:hover {
  background-color: #ffcccc;
  height: 90px;
  margin-bottom: -60px; /* 关键：负外边距抵消高度增长 */
  z-index: 100;         /* 确保悬浮时显示在最上层 */
}

⚠️ 注意事项：

• 负 margin-bottom 的值需实测微调：它取决于默认高度与悬停高度的差值，以及 padding、line-height、字体渲染差异等。建议在开发者工具中动态调试；
• z-index 仅在定位元素（position 为 relative/absolute/fixed）上生效，因此必须为 .grid-item 显式声明 position: relative；
• 若网格项包含多行文本或弹性内容，优先考虑 max-height + overflow: hidden + transform: scaleY() 等更稳定的动画方案；
• 此方法不影响 Grid 的源顺序、语义结构和屏幕阅读器解析，完全兼容无障碍标准。

总结：无需脱离 Grid 流，仅靠 margin-bottom 补偿与 z-index 分层，即可优雅实现“视觉重叠、布局稳固”的交互效果——这是兼顾表现力与规范性的现代 CSS 实践范例。