一.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)。