CSS 筆記 | Position

最近在練習切版，除了大家非常熟悉的 grid 和 flex 常用到外，還有一個也非常重要的元素定位方式也時不時會需要用到，它就是今天的主角 — Position 啦！

先附上我練習 position 的 Codepen 內容，大家看文字比對 Codepen 中的畫面和 CSS 會比較清楚每個 position 屬性的差異。

Position 的屬性有五個：static, relative, absolute, fixed, sticky。若我們沒有專門去對元素設定 position，那預設的 position 就會是 static，這個很重要，因為會影響等等會講到的 absolute 定位結果。

Relative 的效果在尚未設定 top, bottom, left, right 時看起來是跟 static 差不多的，但也就是剛剛提到的 relative 可以透過設定 top, bottom, left, right 來相對地調整其原先的位置。

我們可以看到 relative block 1 並未設定任何 top, bottom, left, right 的值，所以看起來跟 static block 是一樣的。

但 relative block 2，我給了它 left: 100px，於是它就從原先的位置左邊推開 100px 的空隙，這就是 positon: relative 的功能。

Absolute 又比 relative 複雜一點，relative 定位參照的是原先自己的位置，absolute 參照的則是父層的位置。

Absolute 把父層作為參照基準是有規則的：父層的 position 不得為 static。也就是說一但父層的 position 我們沒有專門去設定，仍然維持為 static 的狀態，那 position 設定為 absolute 的元素就不會拿它當參照點，而是會往外去找 position 不是 static 的層當參照點，這也是為什麼很多時候一把元素設為 absolute，版面就飛走的原因。

absolute block 1 的父層 (黑框區塊) 因為沒設定 position，所以 absolute block 1 直接去找 viewport 做對照，然後就，啪，飛走了....

absolute block 2 的父層因為設定為 relative，因此被拿來當參照點，所以版面沒有飛掉。

Fixed 又是一個神奇的東西，基本上完全可以把它想像成有一根圖釘把一個元素一直釘在你的視窗上，無論你如何滾動你的視窗，它依然都在那個位置，比如說 Facebook 最上層的那個功能列。

固定在視窗的意思就是它的參照基準是視窗的位置，我們依然可以透過 top, bottom, left, right 來決定該元素要被“釘”在視窗的哪個位置。

因為我把 fixed block 的 top, right 都設定成 0，因此 fixed block 會直接貼在視窗的最右上角，接下來無論我們如何捲動視窗，都會看到它依然在右上角的位置，換句話說，它已經被“釘”住啦！

這是一個很類似 fixed 的屬性，但它跟 fixed 不一樣的地方是它一開始不會出現，要一直捲動到這個元素超過畫面時，sticky 才會作用把這個元素固定在畫面的某處，聽起來很抽象對吧，建議在上面的 Codepen 玩玩看會比較清楚是什麼意思。

上圖可以看到，因為我設定 sticky block 的 postion 為 sticky，然後 top: 0，因此當畫面捲動超過 sticky block 時，sticky block 開始會被固定在畫面的最上方，產生跟 fixed 類似的效果。