為什麼相對定位元素中的絕對定位元素會從其直接父級繼承其位置？

相對定位中的絕對定位：為什麼層次結構很重要

在 HTML 中，元素的位置由 CSS 定位屬性決定。當一個元素被分配絕對定位時，它會從文件中的正常流中刪除，並且它的位置是相對於其最近的祖先使用position:absolute或position:relative來定義的。

問題：

考慮以下HTML 結構：

<div id="1st">
  <div id="2nd">
    <div id="3rd"></div>
  </div>
</div>

如果第一個div 的位置：relative，第二個div 的位置：absolute，第三個div 的位置：absolute ，為什麼第三個div相對於第二個div而不是第一個div絕對定位？

答案：

理解這種行為的關鍵在於絕對的方式定位影響子元素的位置。

當一個元素絕對定位時，它所包含的任何子元素也相對於它絕對定位，即使這些子元素有自己的絕對定位。這是因為絕對定位有效地重置了子元素的預設相對定位。

在我們的範例中，第三個 div 相對於第二個 div 絕對定位，因為第二個 div 具有position:absolute。第一個 div 的絕對定位（位置：relative）對第三個 div 的定位沒有影響，因為它不是第三個 div 的直接祖先。

實現擁有第三個div 的所需行為div 相對於第一個div 絕對定位，我們需要從第二個div 中刪除絕對定位，並使第三個div 成為第一個div 的直接子元素：

<div id="1st">
  <div id="3rd"></div>
</div>

以上是為什麼相對定位元素中的絕對定位元素會從其直接父級繼承其位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！