前言

接下來要討論CSS定位屬性，原本我以為會如同座標一樣去定位元素的位置，比方說就像是地圖上輸入經緯度座標一樣把元素定義在某個位置，仔細研究後發現完全不是這樣，所以接下來就來探討CSS定位是什麼？

position 定義

CSS 定位(position)用來控制HTML元素在網頁上的定位方式。

簡單來說，以原本方框出現的位置為基準，來指定視覺上元素方框出現的地方。

Position Type

在理解各個定位方式之前，先來簡單介紹position屬性指定元素的定位類型，透過五種不同的定位類型影響元素方框（box）產生方式，以下列出五種定位類型：

• static
• relative
• absolute
• fixed
• sticky

static

預設情況下，所有元素都是以static作為預設值定位。元素方框以一般的方式產生，依照HTML的正常流程佈局(Normal layout flow)，或是可以簡單理解為依照順序自然排列。
（預設來說會依照block-level elements佈局，產生屬於文章流向的box）
position屬性設定為static的元素不受 top、bottom、left 和 right 屬性的影響。

relative

元素會相對於其在文件流程中的正常位置進行定位，元素會保留原本位置，然後根據 top、right、bottom、left 的值相對於自身進行偏移，且偏移不會影響任何其他元素的位置。

頁面版面配置上會跟設置static的元素提供的空間與位置相同。
（原本的位置仍然被佔據，只是視覺上被「挪動」了。）

absolute

我認為是較難理解的類型。
具有position: absolute 元素會會脫離原本的一般文件流程位置排列（removed from the normal document flow），不會為頁面版面配置（page layout）中的元素建立任何空間。
接著會往上層搜索，元素找相對於其最接近的位置上階（positioned ancestor）來定位。
如果找不到則會以 HTML （即整個頁面，initial containing block）為準。
最終位置由 top、right、bottom 和 left 的值決定。

fixed

如同 absolute 模式，具有position: fixed元素也一樣脫離一般文件流程並不在頁面配置中建立任何空間。
它會相對於其initial containing block（視覺媒體中的檢視區（viewport））進行定位，
這表示當捲動頁面時，它始終停留在相同的位置。
最終位置由 top、right、bottom 和 left 的值決定。

sticky

具有position: sticky元素會根據一般文件流程進行定位，在相對relative和固定static之間切換位置，視捲動位置而定。
意思是具有 position: sticky 元素一開始是relative，但當滑動到某個位置時，會切換成static，看起來會像「黏」在那裡一樣。

此屬性值一律會建立新的堆疊內容（stacking context，元素依照z軸（螢幕上深度）來相互分層堆疊），會黏附到最接近具有捲動機制（scrolling mechanism）的上階層。

資料參考

書<CSS大全第四版>
Mdn - position
w3school - CSS The position Property