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