position 在CSS裡面是一個很重要的排版屬性，比如我們希望某個元素固定在畫面上的話，就可以使用position fixed。

position:fixed;

Position 的作用

position 的作用是設定物件定位時所需要的參考對象，預設狀態下的物件位置是依據資料順序排列，如果對其添加不同的 position 後，就能改變物件所參考的對象，進而改變位置。

position 常見的值有 5 種 :

static (靜態定位)
relative (相對定位)
fixed (固定定位)
absolute (絕對定位)
sticky (黏貼定位)

static (靜態定位)

此定位是將其他定位特性取消，回到最原始的狀態，預設也都屬於此種定位。

relative (相對定位)

其效果是將設定的物件，將其參考空間參考自身原始的資料流位置，且此種定位值並不會將物件獨立一層，搭配其它 CSS 屬性，如 top 、 right 、 bottom 、 left 可做到顯示位置的偏移。

absolute 絕對定位

其效果是將設定的物件，將其參考空間設定為: 離自身最近且具備定位設定的父層空間，如果沒有任何一個父層空間具備，該物件將採用視窗空間座位參考空間，而父層空間只要俱備: relative / absolute / fixed / sticky，就可被絕對定位物件做為參考空間。

另外，當物件設定了 absolute 之後，將會自己獨立一層，不會與其它物件有任何關連，所以可以利用 absolute 來做到物件堆疊的視覺效果。

Fixed 固定定位

其效果是將設定的物件，將其參考空間設定為一個固定於畫面的視窗，也就是說當對一個物件設定了 position: fixed，該物件的參考空間就直接對視窗的範圍了，常見為蓋板廣告或是導覽列等等。
特別注意的是 fixed 定位與 absolute ，一樣都會自己獨立一層，但其實特性差異很大!

fixed 除了將參考空間設定為視窗與自己獨立一層外，也由於定位的空間是定在視窗內，所以不管你如何捲動你的視窗卷軸，這個物件就是怎樣都不會換位置，但 absolute 若定位在視窗的話則會被捲走，這也是兩者之間非常明顯的差異點。

Sticky 黏貼定位

它同時結合了 relative 與 fixed 兩大特性，這個定位的特色是

• 預設定位在父層空間
• 當視窗捲動到該物件位置時，會依據對該物件所設定的 top 值來讓該物件呈現 fixed 在視窗的效果
• 當物件呈現 fixed 效果時，其所能 fixed 的空間是該物件的父層空間
• 當視窗往下捲到超過 sticky 物件的父層空間時， sticky 物件則不會再呈現 fixed 的效果，而是會被捲離視窗範圍。

結論:
設定為 sticky 的物件會跟著捲軸移動，但僅限於「在父層空間內」移動，一但視窗捲超過父層空間， sticky 就會被捲離開!

參考資料連結:https://ithelp.ithome.com.tw/articles/10253500