17370845950

通过设置负外边距（margin-bottom: -60px）和 z-index，可在保持 grid 布局完整性的同时，让 hover 放大的 div 自然覆盖下方行，避免推挤其他网格项。

在 CSS Grid 布局中，元素默认遵循网格轨道（grid tracks）的尺寸约束，任何尺寸变化（如 hover 时 height 增大）都会触发重新布局，导致后续行被下推——这违背了“保持网格形状”的核心需求。直接使用 position: absolute 虽可实现重叠，但会使元素脱离文档流，破坏 Grid 的行列对齐、自动折行及响应式行为，因此不可取。

✅ 正确解法是利用外边距补偿（margin compensation）：当 .grid-item 在 hover 时高度从默认值（约 60px）增至 90px（+30px），我们通过 margin-bottom: -60px 抵消其额外占用的垂直空间（含 padding 和内容增长），使该网格项的净占据高度不变，从而维持原始网格轨道高度。同时添加 z-index: 100 确保其层叠于后续项之上，实现视觉重叠。

以下是优化后的完整代码：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  gap: 10px; /* 推荐显式设置 gap，替代依赖 margin 的间距 */
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
  /* 关键：确保基础状态下有明确的高度基准（可选） */
  min-height: 60px;
}

.grid-item:hover {
  background-color: #ffcccc;
  height: 90px;
  margin-bottom: -60px; /* 补偿增加的高度，维持网格结构稳定 */
  z-index: 100;         /* 确保悬停项显示在最上层 */
}

⚠️ 注意事项：

• 负外边距值需根据实际 height 增量精确计算（例如：原高 ≈ padding-top + content-height + padding-bottom，若默认无显式 height，则需通过 DevTools 测量）；
• 若网格项内含动态内容（如多行文本），建议配合 min-height 和 overflow: hidden 控制溢出，避免布局抖动；
• z-index 仅对定位上下文（position ≠ static）生效，但 Grid 项默认为 position: static；现代浏览器中，z-index 在 Grid 容器内对子项依然有效（CSS Grid 规范支持 z-index 用于网格项层叠），无需额外设 position: relative（除非需兼容极旧版本）；
• 如需更灵活的重叠控制（如跨多行覆盖），可结合 grid-row: span N 配合 z-index，但本例中负 margin 方案更轻量、语义清晰且完全保留 Grid 布局自治性。

此方法在不牺牲 Grid 布局语义性、可访问性与响应式能力的前提下，实现了精准、可控的视觉重叠效果。