為什麼我的絕對定位元素預設位於頁面的左上角？

層疊樣式表(CSS) 中的絕對定位

在CSS 中，絕對定位允許您使用特定像素移動父容器內的元素或百分比值。然而，遇到絕對定位問題可能會令人沮喪。讓我們深入研究絕對定位的常見問題及其相應的解決方案。

問題：

在嘗試將元素放置在相對於其父元素的絕對位置時，元素的放置失敗，預設位於頁面左上角。

程式碼範例：

<div>
<p><strong>解：</strong></p>
<p>定位失敗的原因在於父容器不是定位元素。具有絕對定位的元素從其 offsetParent（也被定位的最近的祖先）定位。在提供的程式碼中，沒有一個祖先被定位，導致子元素相對於 body 元素發生偏移，body 元素是它的偏移父元素。 </p>
<p>解決方案涉及應用 CSS 屬性position：相對於父親 div 。這會強制父元素成為定位元素，使其成為其子元素的 offsetParent。 </p>
<p><strong>修正的程式碼範例：</strong></p>
<pre class="brush:php;toolbar:false"><div><p>透過設定父元素「padding」 -左：20px；」和position:relative，我們在父元素中建立一個定位參考點，確保子元素在其父元素中準確的絕對定位。</p></div>