目錄
一、定位屬性簡介
二、各屬性值的具體功能
1. relative
2. absolute
3. fixed
三、三種定位屬性的效果總結
參考資料：https://www.bilibili.com/video/BV18J411S7tZ?p=4
position屬性是用于指定一個元素的定位方法類型的屬性，它的取值有：static（預設類型）、relative、absolute、fixed。當position屬性的值不為<code>static</code>（即不為預設）時，我們可以添加：<code>top</code>、<code>bottom</code>、<code>left</code>和<code>right</code>屬性對目前元素進行具體的定位，并且可以使用<code>z-index</code>來設定層級的上下關系。
首先先搭建出測試架構：
對應的css：
目前的效果為：
此時我們将<code>#box2</code>（綠色div）的<code>position</code>值改為relative，并為其設定<code>top</code>和<code>left</code>屬性：
此時的效果為：
可以發現，當定位屬性值為relative時，元素發生偏移的參考點為該元素自身。此外雖然元素移動到了新的位置，但是元素仍然會占有原有的位置，這也是為什麼藍色div沒有排到上面。
我們的測試架構仍與上面相同，初始的效果如下：
此時為<code>#box2</code>開啟絕對定位（<code>position: absolute</code>）：
效果如下：
可以發現藍色div不見了，此時檢查元素：
可以發現原來藍色方塊還在，隻是放置到了綠色方塊的下面。這是因為當元素啟用絕對定位是，該元素就和浮動類似，不會占用原有的空間了，是以後面藍色的方塊就會排列在了紅色方塊的下面。
此時我們再設定對應的偏移：
可以發現此時綠色方塊偏移的參照點為浏覽器的（0,0）點，也可以了解為body元素的最左上角。
但absolute定位并不是什麼情況下參照點都為浏覽器的（0,0）點的，先編寫以下場景：
添加css：
目前效果：
此時為son添加absolute定位，并且設定一定的偏移量：
顯然，它目前的參照點還是浏覽器頁面的（0,0）點。
此時為<code>#father</code>元素也添加一個定位（除了<code>static</code>的定位都可以）：
此時可以發現<code>#son</code>元素的參考點變成<code>#father</code>元素了。
是以，當使用absolute定位時，元素的參考點為：該元素向外層尋找最近的有添加定位的父級元素：
找到了則參考點為該父級元素的左上角
否則參考點設定為body元素的左上角（即浏覽器頁面的(0,0)點）。
當設定了fixed後元素将固定在視窗的一個位置，即相對整個視窗的位置不再發生變化。
具體例子：
測試效果：
此時無論如何拖動頁面，這個側邊條依然會保持在視窗的左邊不動，是以使用這個定位可以制作懸停效果。
定位屬性值
效果
relative
元素發生偏移的參考點為該元素自身，雖然元素發生了移動，但是元素仍然會占有原有的實體位置
absolute
元素不會占用原有的實體空間，且偏移參考點為最近的有添加定位的父級元素，如果找不到則為body元素（即浏覽器(0,0)點）
fixed
元素将固定在視窗的一個位置，即相對整個視窗的位置不再發生變化
tips：隻有添加了定位的元素中，top、bottom、left、right和z-index這些定位屬性才會生效。