我不明白為什么一個在相對div里面定位為絕對的div會和其他元素重疊。就我理解，它的位置應該固定在它的相關div容器中，并包含在其中，不是嗎？

我的嘗試:

#content {
  position: relative;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
}

<div id="before">
  some div
</div>
<div id="content">
  <div id="overlay">
    <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>

來自MDN文檔的絕對定位，

該元素從普通文檔流中刪除，并且沒有空格 為頁面布局中的元素創建。它是相對定位的 到它最近的祖先，如果有的話；否則，它將被放置 相對于初始包含塊。它的最終位置是 由頂部、右側、底部和左側的值確定。

當z-index的值為時，此值會創建新的堆疊上下文 不是自動的。絕對定位框的邊距不會折疊 帶其他邊距。

如果您想要保持流，那么您需要從父對象中移除位置:相對。

通常，如果您希望子元素相對于其當前位置定位，而不改變其周圍的布局，您可以在子元素上應用position: relative。

應用位置:絕對相對于父對象的位置放置子對象，更改其周圍的布局。

#content {
  background: red;
}

#overlay {
  position: relative;
  top: 200px;
  left: 0;
  width: 100%;
  background-image: url(https://picsum.photos/800);
  background-size: cover;
}

<div id="before">
  some div
</div>
<div id="content">
  <div id="overlay">
    <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>