這邊要介紹css的position四種用法，分別是relative(相對)、absolute(絕對)、fixed(固定)、sticky(黏性)。

H2 H1position：relative(相對定位)

移動後，元素原本位置還是存在在原地，不會跟著移動，並且會占空間。

從字面上來看，相對的意思是 → 以某一點為基準點，來標示另外一個點的位置。
所以大概可以猜到相對定位用法，就是使元素根據自身位置來移動位置。也就是當你在
設定為position：relative(相對定位)的元素，給它right:20px;，並不是根據自
身位置往右邊移動20px，而是跟該元素自己原本位置的右邊(該元素的右框線)，
保持 20px 的距離(偏移量)，也就是當你設定right:20px，瀏覽器會把這
轉換成文字「以該元素的右邊框線為基準點，使該元素的右邊框線距離基準點，反向移動20px」。
所以可以把position：relative看成獨特的「CSS 系統的反向座標邏輯」，只有position：relative才有。
position: relative中的top、bottom、left、right屬性是定義「偏移量 (Offset)」，
而不是定義「最終位置」。

H2 position：absolute(絕對定位)

使設定的該元素不占空間，且根據最接近的已定位父層或祖先層為定位基準(已設定position，且值不等於static的父層或祖先層元素)。當沒有已定位的祖先時，定位基準是 Initial Containing Block，即 html 元素的內容區域，該元素設置 top: 0; left: 0; 時，元素會被定位到 html 元素內容的最左上角，也就表示該元素跟作為基準點的距離左邊跟上方都是0。且這個定位點是固定在整個頁面內容上的，當滾動頁面時，頁面內容過長需要滾動時，該元素會隨著一起滾動，甚至消失。

H2 position：fixed(固定定位)

使設定的該元素不占空間，並固定在瀏覽器視窗（Viewport）的特定位置，不會隨頁面滾動而改變該位置，也就是不管網頁內容多長，往下滾動多少，設定fixed後的元素依然在該位置固定住不變。給已經設定fixed後的元素設定bottom: 20px;就會距離視窗底部 20 像素、right: 20px;就會距離視窗右側 20 像素。

H2 position：sticky(黏性定位)

使設定的該元素會占空間，允許元素在特定條件下像普通的元素 (relative)移動，但當滾動視窗的值達到後，就會固定在螢幕上 (fixed)，可以說是 relative 和 fixed 的結合

position所有定位屬性的座標 (top/bottom/left/right) 都是以相同方式計算，但它們的定位基準（原點）不同。