第一次看 position 時，根本是一知半解，尤其是 relative ( 相對定位 ) 和absolute ( 絕對定位 )，直到後面越練習越熟悉後，才發現這二個定位搭配在一起用時超好用，所以就趁這次將 position 常用的定位方式都筆記下來，以免以後要用時又要重查一次
以下就來介紹 position 的四種常見定位方式吧
- 灰色矩形為沒有定位的元素
- 紅點為定位起點
- 綠色矩形為被定位後而改變位置的元素
在網路上看到針對 position 的圖解定位方式，第一眼覺得好可愛又好平易近人的感覺呀（？但可惜網路上好多類似圖，找不太到原圖出處，所以我就參考並用 figma 簡單畫一下，再把顏色更改一下，這樣應該會更好理解！
1. Static ( 靜態定位 )：
第一個是 static，不會被定位，元素會依照它在 HTML 的順序做垂直向下排列，同時它也是所有元素的 position 預設值，所以不需要去寫它，有一點需要特別注意的是，因為 static 無法定位，所以屬性 top／bottom／right／left 和 z-index 都無效唷！
→ static 不會做任何定位，所以當發現 top／bottom／right／left 和 z-index 無效用時，可以檢查一下 position，將static 改成其他定位方式
2. Relative ( 相對定位 )：
第二個是 relative，在沒有加入 top／bottom／right／left 這些屬性去移動元素的情況時，元素位置會跟 static 一樣，但加入了上面的移動屬性後，元素會依「自己原本顯示的位置」為定位點 ( 圖上的紅點 ) 做上、下、左、右的偏移，有一點需要特別注意的是，元素原本的空間仍會保留不會消失！( 圖上的灰色邊框矩形)
→ relative 只會跟「自己原先的位置」做定位偏移，但不會跟「其他元素」做定位偏移
3. Absolute ( 絕對定位 )：
第三個是 absolute，它會依「有做定位的父層元素」為定位點來做上、下、左、右的偏移，但如果上一層父層沒有做定位 ( 即定位方式為 static 就是沒做定位 )，absolute 就會再往上一層去找父父層或父父父層，直到找到有做定位的元素
但這邊應該會疑問的是，
但如果都沒有任何一個父層元素做定位怎麼辦呢？
不用擔心！若它都找不到就會依「螢幕視窗」為定位點 ( 圖上的紅點 )→ absolute 是跟「有定位的最近上層元素」做定位偏移，若上層元素都沒有定位，就會跟「螢幕視窗」做定位偏移，所以當發現元素加入 absolute 跑版後，記得去檢查上層哪一個元素做定位， absolute 很好用，但也是最容易造成跑版的原因哦！
這邊再三強調是以「螢幕視窗」為定位點，非「body」！
「螢幕視窗」是目前網頁可視的範圍，「body」是整個網頁內容到最底
4. Fixed ( 固定定位 )：
最後一個是 fixed，跟上面的 absolute 有點像，但它只會依「螢幕視窗」為定位點來做上、下、左、右的偏移，並且當視窗有 scroll bar 時，即便滑動 scroll bar ，它是會在視窗固定著，而如果沒有加入移動屬性，則它會在原本的位置固定住，並會在最上層，所以會覆蓋下層的元素內容
→ fixed 是跟「螢幕視窗」做定位偏移，並且會在視窗上固定著，適合用於「拉回最上層、回首頁、導覽列、菜單…等」
常見的搭配組合
剛剛前面有說到 relative 只能跟自己原先的位置做定位，但如果兩個有父子關係的元素，希望子元素能依父元素做定位點做位移，要怎麼辦呢？
答案就是用 relative + absolute！
父元素用 relative、子元素用absolue
排版時很常用到這個組合，可以把上圖的黃色矩形想像成是一個外層的 div ( 父元素 )，裡面包著另一個綠色矩形的 div ( 子元素 )，而綠色矩形以黃色矩形為定位點，向下移 20 px、向右移 40 px，寫法就會如下：
最後，附上codepen
參考：