如何无空隙叠加Div：实现下半部分覆盖另一Div且避免父容器空白

我明白你的痛点：用transform: translateY(50%)让元素下移一半后，它原来的位置会空出来，导致父容器出现难看的空白，而且你不想用负margin-top，还允许调整页面结构。下面给你两个靠谱的解决方案，都能完美实现需求：

方案1：相对+绝对定位（最直观的经典方案） #

这个思路是让需要覆盖的元素脱离文档流，直接相对于父容器定位，从根源上避免空隙问题。

调整后的HTML结构 #

<div class="container">
  <div class="dark-bg">深灰色底部Div</div>
  <div class="overlay">需要覆盖的Div</div>
</div>

对应CSS样式 #

.container {
  position: relative; /* 给绝对定位元素提供参考基准 */
  width: 300px; /* 示例宽度，根据你的需求调整 */
}

.dark-bg {
  background-color: #333;
  color: #fff;
  padding: 40px;
}

.overlay {
  position: absolute;
  bottom: 50%; /* 让元素底部对齐容器垂直中点 */
  left: 0;
  right: 0;
  background-color: #eee;
  padding: 40px;
}

为啥好用：绝对定位的元素完全脱离正常文档流，不会在原来的位置留下空间，父容器的高度只会由深灰色Div决定。bottom: 50%精准让覆盖元素的底部卡在容器中间，刚好实现下半部分覆盖的效果。

方案2：CSS Grid布局（现代布局首选） #

用Grid可以把两个元素塞进同一个网格单元格，轻松实现层叠和位置调整，完全不用操心文档流的问题。

HTML结构 #

<div class="grid-wrap">
  <div class="dark-bg">深灰色底部Div</div>
  <div class="overlay">需要覆盖的Div</div>
</div>

对应CSS样式 #

.grid-wrap {
  display: grid;
  width: 300px;
}

/* 让两个元素共享同一个网格单元格 */
.dark-bg, .overlay {
  grid-area: 1 / 1;
}

.dark-bg {
  background-color: #333;
  color: #fff;
  padding: 40px;
}

.overlay {
  background-color: #eee;
  padding: 40px;
  align-self: end; /* 把元素定位到单元格底部 */
  transform: translateY(50%); /* 下移自身高度的一半，完成覆盖 */
}

原理说明：grid-area: 1 / 1让两个元素重叠在同一个单元格里，align-self: end把覆盖元素固定在单元格底部，再用transform: translateY(50%)让它向下移动自身高度的一半，刚好覆盖在深灰色Div的上半部分。因为两个元素共享单元格，不会额外占用空间，父容器自然不会有空隙。

这两个方案都不用负margin-top，而且结构调整也很简单，你可以根据自己的项目环境选一个最顺手的～

内容的提问来源于stack exchange，提问作者Gizmo90