为何relative容器内的absolute元素会导致父容器重叠后续div？

你误解了relative和absolute定位的关系：relative只是给absolute元素提供定位参考（即absolute的坐标相对于relative容器），但不会限制absolute元素的显示范围，也不会因为内部有absolute元素而自动撑开自身高度。

你的问题根源在于：

• #overlay设置了position: absolute，这会让它完全脱离文档流——简单说就是它不再占用页面空间，浏览器计算#content的高度时，会直接忽略这个元素。
• 所以#content因为没有其他正常流的元素撑高度，实际高度为0，后续的#after元素会正常占据文档流中#content原本的位置，而#overlay因为是绝对定位，会覆盖在#after上方，看起来就像是#content和#after重叠了。

解决方法 #

有几种常见的修复方式，根据你的需求选择：

方法1：给relative容器设置固定高度

如果你知道#overlay的高度，可以直接给#content设置对应的高度，让它占据页面空间：

#content {
  position: relative;
  height: 300px; /* 根据内容或背景图高度调整 */
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 让overlay占满父容器高度 */
  background-image: url(https://picsum.photos/800);
  background-size: cover;
}

方法2：用正常流元素撑开relative容器

如果#overlay里的文本需要决定容器高度，可以把文本放到一个正常流的容器中，让它撑开#content，再让#overlay绝对定位覆盖整个容器：

#content {
  position: relative;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
  z-index: -1; /* 把背景放在文本下方 */
}

.text-content {
  /* 正常流元素，负责撑开父容器高度 */
  padding: 1rem; /* 可选，添加内边距让文本不贴边 */
}

对应的HTML修改：

<div id="before">
  some div
</div>
<div id="content">
  <div id="overlay"></div>
  <div class="text-content">
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
    <div>Some text.</div>
  </div>
</div>
<div id="after">
  other div
</div>

方法3：使用Grid布局实现层叠效果

用Grid可以更简洁地实现背景层和内容层的重叠，同时让容器被内容撑开：

#content {
  display: grid;
}

#overlay, .text-content {
  grid-area: 1 / 1; /* 让两个元素占据同一个网格区域 */
}

#overlay {
  background-image: url(https://picsum.photos/800);
  background-size: cover;
}

.text-content {
  padding: 1rem;
  z-index: 1; /* 确保文本在背景上方 */
}

HTML结构和方法2一致，不需要设置position属性，更简洁。

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