今天要來聊聊CSS中很重要的概念「定位」，定位又分成了好幾種：
1. Static 靜態定位
2. Relative 相對定位
3. Fixed 固定
4. Absolute 絕對定位
其中最重要、也最常遇到的會是後面三個，接下來要做一些簡短的介紹。
首先是 「Relative 相對定位」，比較好理解或稱「偏移顯示」；
在CSS中，可以對選取的物件做上下左右偏移的設定，如下：
position: relative;
left: 50px; ＃從原本的位置 偏離左方50px
top: 50px; ＃從原本的位置 偏離上方50px
如左圖（一），當其它物件沒有特別做定位的設定時，則會蓋住其它物件。
而若我們把物件 23和物件 24都設定「relative」 時，則會以「原始碼順序」，較新的會覆蓋住較舊的物件。
如圖（二），可以看到 24把 23蓋住了，因為我們有在物件 24身上加上 position: relative
如果你就是喜歡23號，不想讓它被蓋住，這個時候可以對物件 23使用「還我漂漂拳」（誤
z-index: 1
如此一來，物件 23即會跑到最上面了。
Note: 每個物件的 z-index 的預設值是０
接下來，我們來看看「 fixed」
其實就字面上來看就蠻明顯的，就是「固定」啦～
常常在網站上會有「聊天機器人」、或是「Back to top」等在角落；
fixed後的物件，會獨立出一層，在資料當下的位置，依據視窗做定位。
.box {
position: fixed;
right: 0;
bottom: 0;
}
我們對box這個區塊下
position: fixed
距離右側 0px
距離底部 0px
因此就會固定在視窗的右下角
最後我們來瞧瞧「絕對定位 Absolute」
當物件不需要跟其他物件互動、遺世而獨立時可使用；
使用時機：人見人愛(?)的蓋板廣告。
絕對定位，若有ABC三層，我們絕對定位在 C層，C會往上找 →B →A層，直到有做_絕對定位_的那層，不然就會直接黏在當下的第一視窗的位置了。
若父層皆未做定位，我們對box做絕對定位，並距離底部為０
.a {
border:black 1px solid; padding: 30px;
}
.b {
border: black 1px solid; padding: 30px;
}
.box {
width: 100px;
height: 100px; background-color: red; font-size: 50px; color:white; position: absolute; bottom: 0;
}
當然定位不僅僅是上述提到的模樣，所以我才說淺見嘛～😅
如果路過大大們有幸看到最後，不妨給我一些建議或指教，我虛心受教～
最後謝謝耐心看到最後，下回待續。
Noted by Alex Chuang 03/24/2021