position 有五個值： static, relative, absolute, fixed 以及新加入的 sticky。
static：為預設值，不會對 position 屬性(top, left, z-index… etc.)有反應。
relative：以正常排版為基準的設定，沒加入其他屬性會與 static 表現一樣，會被當作有 absolute 的子元素的參照物， relative 像是推箱子，推完原本的空間仍然會留下，不會被上下元素填滿。
absolute：把有 relative 的父元素或祖先元素當作參照物，若都沒有 relative 便會以 <body> 為參照物， absolute 有看到一個很好的比喻是便利貼，他是脫離版面的可以被貼在任意地方而不占空間。
fixed：會固定在視窗的設定位置上。
sticky： CSS3 新加入的值，本來狀態與 static 相同，滑到設定位置會如 fixed 一樣固定住，會跟著父元素被滑離開視窗，
屬性
top, left, right, bottom, z-index
優點
1. 使用上非常靈活，可以做出十分客製化的版型或小樣式
缺點
1. 很容易出現跑板使用時須事先規劃
練習
用可愛的貓來做示範的網站
https://ishadeed.com/article/learn-css-positioning/
參考資料
position 屬性的基礎概念
https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/position-%E5%B1%AC%E6%80%A7%E7%9A%84%E5%9F%BA%E7%A4%8E%E6%A6%82%E5%BF%B5-5931254e5203
MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/position
can I use
https://caniuse.com/?search=sticky