求助：实现Div叠加且不影响后续内容正常布局的CSS方案

你遇到的核心问题是：绝对定位的元素会脱离正常文档流，所以父容器.my-container的高度只会由.my-div-1决定，.my-div-2超出的部分不会撑开容器，导致后续的.my-div-3直接顶到.my-div-1底部，破坏了原有布局。

下面是几种能彻底解决问题的方案：

方案1：给父容器添加padding-bottom预留空间 #

通过计算叠加元素超出第一个div的高度，给父容器设置padding-bottom，强制撑开容器高度，让后续元素能排在正确位置。

修改后的CSS：

.my-container {
  border: 10px solid black;
  position: relative;
  /* 计算逻辑：.my-div-2高度240px + 向下偏移的10px（100px的10%） - .my-div-1高度100px = 150px，额外加10px避免边界重叠 */
  padding-bottom: 160px;
}
.my-div-1 {
  border: 10px solid red;
  background: lightblue;
  height: 100px;
}
.my-div-2 {
  border: 10px solid blue;
  background: white;
  height: 240px;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 10%);
  width: 80%;
}
.my-div-3 {
  border: 10px solid green;
  background: yellow;
  height: 100px;
}

缺点：只适合固定尺寸场景，响应式下元素高度变化时需要重新计算padding值。

方案2：用相对定位+负margin实现叠加（不脱离文档流） #

把叠加元素改成相对定位，通过负margin让它向上偏移覆盖在第一个div上，同时保持在文档流中，父容器会自动计算所有元素的高度，后续布局不受影响。

修改后的CSS：

.my-container {
  border: 10px solid black;
}
.my-div-1 {
  border: 10px solid red;
  background: lightblue;
  height: 100px;
}
.my-div-2 {
  border: 10px solid blue;
  background: white;
  height: 240px;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  width: 80%;
  /* 向上偏移90px，刚好覆盖在.my-div-1上；同时向下偏移10px对应原效果的top:10% */
  margin-top: -90px;
  top: 10px;
}
.my-div-3 {
  border: 10px solid green;
  background: yellow;
  height: 100px;
}

优点：兼容性好，适合大多数场景，无需手动计算容器高度。

方案3：用Grid布局实现叠加（现代方案） #

Grid布局支持将多个元素放在同一个网格单元格中，天然实现叠加效果，同时所有元素都在文档流内，父容器会自动撑开至最高元素的高度，后续布局完全正常，代码更简洁。

修改后的CSS：

.my-container {
  border: 10px solid black;
  display: grid;
}
/* 将.my-div-1和.my-div-2放在同一个网格单元格 */
.my-div-1, .my-div-2 {
  grid-area: 1 / 1;
}
.my-div-1 {
  border: 10px solid red;
  background: lightblue;
  height: 100px;
}
.my-div-2 {
  border: 10px solid blue;
  background: white;
  height: 240px;
  width: 80%;
  /* 水平居中+向下偏移10px，对应原效果的位置 */
  justify-self: center;
  margin-top: 10px;
}
.my-div-3 {
  border: 10px solid green;
  background: yellow;
  height: 100px;
  /* 放在下一个网格行 */
  grid-area: 2 / 1;
}

优点：响应式适配更灵活，代码结构清晰，推荐在现代浏览器环境中使用。

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