position的五個不同的位置值

一.position: static  無定位

HTML 元素預設情況下的定位方式為 static（靜态）。

靜态定位的元素不受 top、bottom、left 和 right 屬性的影響。

position: static; 的元素不會以任何特殊方式定位；它始終根據頁面的正常流進行定位：

二.position: relative 相對定位

position: relative; 的元素相對于其正常位置進行定位。

設定相對定位的元素的 top、right、bottom 和 left 屬性将導緻其偏離其正常位置進行調整。不會對其餘内容進行調整來适應元素留下的任何空間。

三.position: fixed 相對于視窗的固定定位

position: fixed; 的元素是相對于視口定位的，這意味着即使滾動頁面，它也始終位于同一位置。 top、right、bottom 和 left 屬性用于定位此元素。

固定定位的元素不會在頁面中通常應放置的位置上留出空隙。

四.position: absolute 絕對定位

position: absolute; 的元素相對于最近的定位祖先元素進行定位（而不是相對于視口定位，如 fixed）。

然而，如果絕對定位的元素沒有祖先，它将使用文檔主體（body），并随頁面滾動一起移動。

注意：“被定位的”元素是其位置除 static 以外的任何元素。

五.position: sticky

position: sticky; 的元素根據使用者的滾動位置進行定位。

粘性元素根據滾動位置在相對（relative）和固定（fixed）之間切換。起先它會被相對定位，直到在視口中遇到給定的偏移位置為止 - 然後将其“粘貼”在适當的位置（比如 position:fixed）。