CSS position 快速回顧筆記
Position 的用途
決定 物件要根據哪一個基準點做定位
position: static
即一般網頁的資料流，每個物件會預設為 static，除非這個物件已有其他 position 屬性且要把它回復為預設，才會特別添加 static
position: relative
範例 CSS
top: 30px;
left: 20px;
position: relative;
設置
position: relative後，不會脫離資料流，但是把基準點設在自身的資料流 可依設置top、left等屬性，依基準點進行位置偏移（如果沒有特別設置偏移，行為和static很像）
position: absolute
範例 CSS
top: 30px;
left: 20px;
position: absolute;
設置了
position: absolute之後，物件會脫離資料流自己獨立一層，並依規則找到自己的依靠作為基準點 規則：距離 自己階層最近的父容器，且這個父容器 有設置static以外的position屬性（relative、absolute、fixed、sticky都算喔！），就會依這個父容器作為基準點 如果都找不到，則以 viewport 作為基準點
因為 absolute 已經脫離資料流獨立一層，所以可以做到堆疊的效果
position: fixed
設置了
position: fixed之後，物件會脫離資料流自己獨立一層，並且直接以 viewport 作為基準點
雖然跟 absolute 很像，都會脫離資料流，但由於 fixed 的基準點是直接黏在 viewport，所以捲軸怎麼滾動，那個物件都還是如如不動
實務上很適合做蓋版廣告、light box、modal、navbar
position: sticky
很新的定位屬性，也很酷炫
- 預設定位是會在資料流中，如
relative sticky物件的 top 顯露出來後，會像fixed一樣黏在視窗- 繼續往下滾動，當視窗脫離
sticky的父層範圍後，sticky物件會脫離視窗範圍
方向翻譯
top: 30px : 距離 基準點的 top 要 30 px
left: 20px : 距離 基準點的 left 要 20 px
right: 0px : 距離 基準點的 right 要 0 px
換句話說，top 這些屬性，要 position 設置 static 以外的才有意義