靜態定位和相對定位的區別

Question

在CSS中，靜態（預設）定位和相對定位有什麼差別？

Answer 1

對於「為什麼CSS仍會實作position:static;」的答案，在某種情況下，對於父元素使用position:relative，對於子元素使用position:absolute會限制子元素的縮放寬度。在水平選單系統中，您可能會有連結的'列'，使用'width:auto'無法與相對父元素一起使用。在這種情況下，將其變更為'static'將允許寬度根據其中的內容變化。

我花了好幾個小時糾結於為什麼無法根據其中的內容調整容器的大小。希望這能幫到您！

Answer 2

靜態定位是元素的預設定位模型。它們以正常的HTML流的一部分渲染在頁面上顯示。靜態定位的元素不遵守left、top、right和bottom規則：

相對定位可讓您指定相對於元素在HTML流中的正常位置的特定偏移量（如left、top等）。因此，如果我在一個div中有一個文字框，我可以在文字框上應用相對定位，以便它顯示在相對於它在div中通常放置的位置的特定位置：

還有絕對定位 - 您可以指定元素相對於整個文件的確切位置，或相對於元素樹中更高層級的下一個相對定位元素：

當在層次結構中的父元素應用了position: relative時：

請注意，我們的絕對定位元素受到相對定位元素的限制。

最後還有固定定位。固定定位將元素限制在視窗中的特定位置，在滾動過程中保持不變：

您也可以觀察到固定定位元素不會造成捲動，因為它們不被視為受視窗限制的元素：

而絕對定位元素仍受到視窗的限制，並會造成捲動：

除非當然您的父元素使用overflow: ?來決定滾動的行為（如果有）。

使用絕對定位和固定定位，元素會脫離HTML流。