通过设置负外边距（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 实践范例。
