通过设置负外边距（margin-bottom）配合 z-index，可在保持 grid 布局结构不变的前提下，让 hover 状态下的元素视觉上覆盖后续行，避免推挤其他网格项。
在 CSS Grid 中，每个网格项默认遵循网格轨道（grid track）的尺寸约束，当元素因交互（如 :hover）增大高度时，若不加干预，会自动撑开所在行高，进而影响整行乃至后续行的布局——这与“保持网格形状”的需求相悖。关键在于：不改变网格容器的结构计算逻辑，仅调整视觉层叠与空间占位。
解决方案的核心是利用外边距的“抵消效应”：当某网格项 hover 后高度从默认值（例如约 60px）增至 90px（+30px），我们为其设置 margin-bottom: -30px，即可精确抵消其超出部分对后续行的推挤。但仅靠负外边距还不够——若多个元素同时 hover，可能因层叠顺序导致遮挡异常，因此需配合 z-index 确保当前悬停项始终位于最上层。
以下是优化后的完整实现：
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
gap: 10px; /* 推荐添加 gap，提升可读性与间距控制 */
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
transition: all 0.3s ease; /* 添加平滑过渡效果 */
position: relative; /* 为 z-index 生效提供定位上下文 */
}
.grid-item:hover {
background-color: #ffcccc;
height: 90px;
margin-bottom: -60px; /* 抵消超出原始高度的部分（90px - 默认高度≈30–40px，此处-60px确保充分覆盖） */
z-index: 100;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- z-index 仅对已定位元素（即 position 为 relative/absolute/fixed/sticky）生效，因此务必为 .grid-item 显式声明 position: relative；
- 负 margin-bottom 的数值需根据实际内容高度动态调整（可通过 DevTools 测量默认高度后计算差值），过度负值可能导致上层内容被意外裁剪；
- 若网格项内含弹性内容（如多行文本、图片），建议同时设置 overflow: hidden 或 min-height 防止布局抖动；
- 不推荐使用 position: absolute，它会使元素脱离网格流，破坏 grid-column/grid-row 的自动分配逻辑，违背“保持网格形状”的初衷。
该方法完全兼容现代浏览器（Chrome 66+、Firefox 61+、Safari 11.1+），且无需 JavaScript，语义清晰、性能高效，是纯 CSS 实现网格内可控重叠的理想实践。
