position 屬性可以設定元素在網頁中的位置，屬性值有以下：

• static ( 預設值 )
• relative
• absolute
• fixed
• sticky

使用上需注意：

• 在 position: static 的情況下區塊元素都是由上而下排列，是瀏覽器排列 HTML 元素的預設方式，因此不需特別設定
• 除了 position: statice 外，其他 position 的屬性值都可以透過 top left bottom right 等屬性來定位
• position: relative 和 position: absolute 通常會搭配一起使用，常使用到的情況是元素之間有重疊，像是
  範例
  當父元素設定 position: relative，子元素設定 position: absolute 時，在子元素設定 top left bottom right 等定位的值時，子元素就會根據父元素來移動位置

例如設定 top: 100px，代表子元素距離父元素的最上方 100px，因此會是往下移動位置，若是 top: -100px，則是往反方向移動，也就是會超出父元素最上方 100px，需注意子元素在定位時，都是以座標 ( 0,0 ) ，也就是子元素的最左上角當成定位點，因此當子元素設定 top: 100px，完整的敘述是：子元素的左上角距離父元素最上方 100px

了解當絕對定位時，子元素是藉由左上角為座標 ( 0,0 ) 來定位時，就可以了解使用絕對定位設定子元素 top: 50%; left: 50%; 不會讓子元素在正中間，要讓子元素在正中間必須要將座標 ( 0,0 ) 的位置移到子元素的中心，可以在子元素設定 transform: translate(-50%,-50%);，表示將子元素往 X 和 Y 軸的 -50% 移動，這邊的 -50% 指的是子元素本身空間的 50%，移動後就會將子元素放在正中間了

• 使用相對 / 絕對定位排版重疊的元素有時也需要搭配 z-index 來調整元素上下層位置，有時想要調整元素的 z-index，發現沒效果時，可以檢查是否有設定 position 屬性，因 z-index 需在 position: static 以外的屬性值才有效果
• 使用 position: relative 搭配 top left 等屬性來移動位置時，元素原本的位置仍然存在，因此有時候使用 position: relative 來移動元素的位置，會發生多出一塊留白，就是原本元素的位置
• 初學相對 / 絕對定位時，常會將所有內容都使用相對 / 絕對定位來排版，造成若要更改內容位置時，在移動位置上較麻煩，因此在排版時也可以思考使用 flex 或是偽元素等等其他做法來代替使用相對 / 絕對定位
• position: fixed 是根據瀏覽器視窗 ( body ) 定位，因此在固定位置後，使用頁面的捲軸上下捲動頁面內容時，設定 position: fixed 的元素都會固定在視窗的定位點維持不動
• position: sticky 可以想成類似使用 position: fixed 的功能，將元素像是黏住一般固定在一個地方，將元素設定 position: sticky 並定位，一直到父元素空間的最後，常見的使用情形是選單，可以參考
  position - CSS: Cascading Style Sheets | MDN中的範例

參考資料：
position