為什麼絕對定位繼承自嵌套 Div 中的直接父級？

Absolute絕對定位異常

在涉及絕對定位的多層佈局中，經常會遇到內層div有絕對定位的場景相對於其直接父級的定位，此父級也絕對定位在另一個div 中。然而，在這樣的設定中，內部 div 從其直接父級繼承其絕對位置，導致看似意外的行為。

考慮以下 HTML 結構：

<code class="html"><div id="1st" style="position: relative;">
  <div id="2nd" style="position: absolute;">
    <div id="3rd" style="position: absolute;"></div>
  </div>
</div></code>

直觀地說，一個期望 #3rd 的位置是相對於 #1st 的絕對位置，因為 #2nd 絕對位於 #1st 內。然而，現實情況是#3rd 的絕對定位繼承自#2nd。這是因為#2nd 上的position:absolute 重置了其相對於其父級的位置，導致#3rd 絕對定位在#2nd 內。

此行為可歸因於CSS 特異性規則。當子元素具有絕對位置時，其位置由其直接父元素的邊界框決定。在這種情況下，#3rd 的位置由 #2nd 的邊界框定義，並且不知道 #2nd 相對於 #1st 的絕對位置。

解決此問題並使 #3rd 絕對定位相對於#1st，有必要使#3rd 成為#1st 的直接子級。換句話說，以下HTML 將產生所需的行為：

<code class="html"><div id="1st" style="position: relative;">
  <div id="3rd" style="position: absolute;"></div>
</div></code>

在這種情況下，#3rd 的絕對位置由其父級#1st 的位置決定，這正是人們所期望的。需要注意的是，透過position:absolute重置父元素的位置也會影響其子元素的位置，除非它們相對於不同的父元素是絕對定位的。

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