絕對定位中的絕對定位

使用網頁佈局時，通常使用絕對定位等定位技術來精確排列元素一頁。但是，當您嘗試在本身絕對定位的元素內應用絕對定位時，就會出現潛在的問題。

假設您有一個具有相對定位 (position:relative) 的容器元素 (1st div)，它允許您相對於其自身位置定位子元素。在此容器中，您有一個絕對定位的元素 (2nd div) 和嵌套在第二個 div 內的第三個絕對定位元素 (3rd div)。

在這種情況下，您可能會期望第三個 div 絕對定位相對於第一個 div，即使第二個 div 也是絕對定位的。然而，事實並非如此。

了解定位層次結構

這種行為的原因在於絕對定位的工作方式。當一個元素被給予絕對定位時，它會從文件的正常流中刪除，而是相對於其最近的定位祖先進行定位。在這種情況下，第2個div是第3個div最近的定位祖先，無論第1個div是否也具有相對定位。

這表示第3個div的絕對位置是相對於第2個div計算的div 的位置，而不是第一個 div 的位置。因此，第 3 個 div 將絕對定位在第 2 個 div 內，而不是第 1 個 div。

備用定位技術

如果您希望第3 個div 是相對於第一個div 絕對定位，您需要將其設為第一個div 的直接子級。這將允許第三個 div 繼承第一個 div 的絕對位置並進行相應的定位。

需要注意的是，position:absolute 會像position:relative 一樣重置子級的相對位置。因此，如果相對定位的父元素中有多個絕對定位的子元素，則它們的位置將相對於其最近的絕對定位的祖先獨立計算。