了解絕對位置與相對位置：寬度、高度等

處理網頁上的元素定位時，了解這些概念絕對位置與相對位置的區別至關重要。讓我們深入探討經常引起疑問的四個關鍵點：

1。相對寬度與絕對寬度

為何相對定位的div會自動佔據100%寬度，而絕對定位的div只佔據內容寬度？

原因是設定位置:absolute 從文件結構的正常流程中刪除該元素。如果沒有明確定義寬度，瀏覽器無法確定絕對定位的 div 的寬度。若要達到 100% 寬度，請明確設定 width:100%。

2。高度與相對位置

為什麼設定高度為100%對相對定位的div沒有影響，而絕對定位的div卻佔據了100%的高度？

有position的元素:relative 的行為與具有position:static 的元素的高度相似。因此，除非父元素具有定義的高度，否則設定 height:100% 將不起作用。相反，絕對定位的元素將從文件流中刪除，並根據其包含元素的高度調整其高度。

3。 Margin-Top 和 Shifting

為什麼 margin-top:30px 會移動絕對定位的 div，而使用 top:30px 時只有相對定位的 div 會移動？

這很可能與 HTML 結構中的父元素有關。如果不提供完整的 HTML 和 CSS 程式碼，則很難找出確切原因。

4。沒有 Top 和 Left 的絕對位置

如果絕對定位的 div 沒有指定 top:0 和 left:0，為什麼它會佔用前面 div 上方的空間？

頂部和左側屬性的預設設定是自動。這表示瀏覽器會根據元素沒有position:absolute時的位置自動計算這些值。因此，絕對定位的 div 將出現在前面的 div 之上，而無需明確定義其位置。