層疊樣式表(CSS) 中的絕對定位
在CSS 中,絕對定位允許您使用特定像素移動父容器內的元素或百分比值。然而,遇到絕對定位問題可能會令人沮喪。讓我們深入研究絕對定位的常見問題及其相應的解決方案。
問題:
在嘗試將元素放置在相對於其父元素的絕對位置時,元素的放置失敗,預設位於頁面左上角。
程式碼範例:
<div>
解:
定位失敗的原因在於父容器不是定位元素。具有絕對定位的元素從其 offsetParent(也被定位的最近的祖先)定位。在提供的程式碼中,沒有一個祖先被定位,導致子元素相對於 body 元素發生偏移,body 元素是它的偏移父元素。
解決方案涉及應用 CSS 屬性position:相對於父親 div 。這會強制父元素成為定位元素,使其成為其子元素的 offsetParent。
修正的程式碼範例:
<div>
透過設定父元素「padding」 -左:20px;」和position:relative,我們在父元素中建立一個定位參考點,確保子元素在其父元素中準確的絕對定位。
以上是為什麼我的絕對定位元素預設位於頁面的左上角?的詳細內容。更多資訊請關注PHP中文網其他相關文章!