如何用纯CSS实现一个div覆盖另外两个内容未知的div？

当然有纯CSS的方案，完全不需要硬编码padding-bottom或padding-top，核心思路是利用CSS Grid布局让中间的div自然跨越上下两个div的区域，自动适配内容高度：

实现代码 #

CSS

.stacked {
  color: #fff;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
}

.stacked .first,
.stacked .third {
  padding: 20px;
}

.stacked .first {
  background: red;
  grid-row: 1;
}

.stacked .third {
  background: blue;
  grid-row: 2;
}

.stacked .second {
  grid-row: 1 / span 2;
  display: flex;
  justify-content: center;
  margin: auto 0; /* 垂直居中对齐 */
}

.stacked .second > div {
  background: green;
  padding: 20px;
  max-width: 50%;
  z-index: 1; /* 确保中间div在最上层 */
}

HTML

<div class="stacked">
  <div class="first">
    Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue, sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
  </div>
  <div class="second">
    <div>
      Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
    </div>
  </div>
  <div class="third">
    Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue, sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
  </div>
</div>

方案说明 #

• 容器.stacked用Grid布局，定义两行自动高度的行，上下div分别占据第一行和第二行
• 中间的.second通过grid-row: 1 / span 2让它跨越两行，自然覆盖在上下div的交界区域
• 用margin: auto 0让中间div垂直居中在两行的重叠位置，z-index: 1确保它显示在最上层
• 所有元素高度由内容自动撑开，完全不需要硬编码padding或margin数值，完美适配未知内容

如果需要兼容更老的浏览器，也可以用相对定位+负margin的方案，但Grid实现更简洁优雅：

兼容方案（无Grid）

.stacked {
  color: #fff;
  position: relative;
}

.stacked .first,
.stacked .third {
  padding: 20px;
}

.stacked .first {
  background: red;
  margin-bottom: 0;
}

.stacked .third {
  background: blue;
  margin-top: calc(var(--second-height) / 2);
}

.stacked .second {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--second-height) / 2);
  transform: translate(-50%, -50%);
  max-width: 50%;
}

.stacked .second > div {
  background: green;
  padding: 20px;
  z-index: 1;
}

注：这个方案需要用JS获取中间div的高度并设置--second-height变量，严格纯CSS的话Grid方案是最优解。

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