纯 css 实现 banner 悬浮重叠的关键是 margin-bottom 负值抵消高度增长并配合 position: relative + z-index 激活层叠，确保视觉覆盖而不推挤布局。
纯 CSS 就能实现 Banner 悬浮重叠，关键不是“让元素变大”，而是让它们视觉上覆盖却不推挤其他内容——margin-bottom 负值 + z-index 是最稳的解法。
为什么 hover 后 Banner 会把下面内容顶下去？
Grid 项默认按内容撑高行轨道；hover 时 height 增加，浏览器自动拉高所在行，后续所有行跟着下移。这不是 bug，是 Grid 的正常尺寸计算逻辑。
- 即使设置了
grid-template-rows: 100px，内容超高仍会突破（除非加overflow: hidden） -
min-height或max-height对行轨道高度无直接影响 - 用
position: absolute虽能脱离流，但会丢失grid-column分配能力，响应式难维护
用 margin-bottom: -Xpx 抵消撑开效果
核心是“视觉增高 ≠ 实际占位增高”：让元素看起来变高了，但通过负外边距把多出来的空间吃掉，不传给 Grid 行轨道。
- 先用 DevTools 测出默认高度（比如
64px），hover 后目标高度（比如120px），差值就是-56px - 写
margin-bottom: -56px，不是凭空估 —— 差 1px 都可能露白边或裁剪文字 - 必须搭配
transition: margin-bottom 0.3s，否则负值突变会造成跳帧 - 若 Banner 内含图片或字体加载后高度变化，建议加
min-height锁定基准，避免抖动
z-index 生效前必须加 position: relative
Grid 子项默认是 position: static，此时 z-index 完全被忽略——这是 90% 的“层级不管用”问题根源。
- 只加
z-index: 10没用；必须写position: relative（或absolute/sticky） -
relative最安全：不改变 Grid 的行列定位，只激活层叠上下文 - 父容器不用设
position，子项自己定位即可生效 - 如果多个 Banner 同时 hover，确保它们的
z-index值有区分（比如用:hover ~ .banner提升兄弟项）
真正容易被忽略的是负 margin-bottom 的精度控制和 position: relative 的强制绑定——这两点漏掉任何一个，都会让整个悬浮重叠效果退化成“页面乱跳”或“盖不住”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
