含相对定位重叠元素时，如何让中间div填充剩余空间？

常规场景的实现方式 #

当需要让中间div填充左右两个div之间的空间时，可通过给中间div的容器设置overflow:auto实现，无论页面尺寸如何（合理范围内），三个div始终贴合。示例代码：

<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="overflow:auto;">
  <div style="background-color:blue;height:10px;margin-top:50px;width:100%"></div>
</div>

带重叠元素的场景问题 #

当存在相对定位的重叠div时，常规方法无法让中间的蓝色div填充到左右重叠区域的空间。示例代码：

<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto;">
  <div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>

尝试的无效方案 #

尝试给蓝色div的容器添加position:relative;left:-50px;width: calc(100% +100px);，但并未达到预期效果：

<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto;position:relative;left:-50px;width: calc(100% +100px);">
  <div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>

问题原因与解决方案 #

问题原因 #

使用position:relative仅会视觉上偏移元素，但不会改变元素的占位空间。同时，中间容器的width: calc(100% +100px)中的100%是指被左右浮动元素挤压后的可用宽度（即父容器宽度减去左右红框、绿框的总宽度），而非父容器的完整宽度，因此加100px后仍无法覆盖到左右重叠的区域。

纯CSS解决方法 #

方法1：负外边距+宽度计算

给中间的蓝色容器设置负外边距，让元素向左右两侧延伸，同时用calc调整宽度以填补负外边距的空间：

<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto; margin: 0 -50px; width: calc(100% + 100px);">
  <div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>

方法2：Flex布局重构（更简洁）

用Flex布局重构整体结构，将左右的主容器与重叠元素分组，中间容器自动填充剩余空间，重叠元素通过绝对定位实现偏移：

<div style="display: flex; align-items: flex-start;">
  <!-- 左侧组 -->
  <div style="position: relative; width: 150px; height: 150px; background-color: red;">
    Left Box
    <div style="position: absolute; left: -50px; top: 25px; width: 100px; height: 100px; background-color: pink;">Left Overlap Box</div>
  </div>
  
  <!-- 中间填充容器 -->
  <div style="flex: 1; margin-top: 100px;">
    <div style="background-color: blue; height: 10px; width: 100%;"></div>
  </div>
  
  <!-- 右侧组 -->
  <div style="position: relative; width: 150px; height: 150px; background-color: green;">
    Right Box
    <div style="position: absolute; right: -50px; top: 25px; width: 100px; height: 100px; background-color: lime;">Right Overlap Box</div>
  </div>
</div>

这种方式结构更清晰，无需依赖浮动和overflow清除，也能轻松适配不同页面尺寸。

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