通过设置负外边距（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 布局语义性、可访问性与响应式能力的前提下，实现了精准、可控的视觉重叠效果。