position(CSS)

預設值

無定位

依照document flow決定

top、left、bottom、right、z-index無效

相對定位

保留原始空間，自元素初始座標進行偏移

有定位的物件的z-index會優先於沒有定位的元素

如果兩個都有定位，位於原始碼後方的元素會蓋過前方的元素

對table-*-group、table-row、table-column、table-cell、table-caption無效

浮動

以瀏覽器視窗為定位，固定於視窗範圍內

瀏覽器可視區域（viewport）為錨點

不會隨螢幕捲動時變更

若母元素的transform、perspective或filter屬性非none時，會改以母元素為錨點定位

固定元素於瀏覽器正中間

將top、left、right、left都設為 0，margin設定為auto

絕對定位

類似於fixed，獨自獨立一層

當一個物件設定為絕對定位，會去父層尋找非static的元素定錨

以母元素中非position: static的元素為錨點移動

首個有定位的父層元素，會成為元素絕對定位位置的座標依據

如果沒有，預設會定位在瀏覽器視窗上

不是body也不是html

不同於fixed，預設只會定位一次

拉動捲軸會跟著捲軸跑，不會固定在視窗上

fixed、absolute、float與Flexbox(CSS)底下的元素皆預設為不會自動抓取空間寬度

設定寬度後會取得所在空間寬度，並與空間等寬

黏滯定位

邊界

position: static+position: fixed

非display的值，為另一獨立屬性

用於決定非static的元素圖層關係

預設值為0

z-index值越高的元素會位於圖層的越前方

https://i.imgur.com/LBE29Hq.png

CSS anchor positioning