1 相對定位（position：relative）
現象和使用：
1.如果對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。
2.設置相對定位之後，我們纔可以使用四個方向的屬性： top、bottom、left、right
特性：
1.不脫標
2.形影分離
3.老家留坑（其爲定位前的位置仍被佔着）
用途：
1.微調元素位置
2.做絕對定位的參考（父相子絕）
參考點：
自己原來的位置做參考點。
2 絕對定位（position：absolute）
特性：
1.脫標
2.做遮蓋效果，提成了層級。
3.設置絕對定位之後，不區分行內元素和塊級元素，都能設置寬高。
參考點(重點)：
一、單獨一個絕對定位的盒子
1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。
二、以父輩盒子作爲參考點
1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。
2.如果父親設置了定位，那麼以父親爲參考點。那麼如果父親沒有設置定位，那麼以父輩元素的位置爲參考點
3.不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素爲參考點
‘父相子絕’：父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
//Note:絕對定位的盒子無視父輩的padding
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px;
/*設置絕對定位之後，margin:0 auto;不起任何作用，如果想讓絕對定位的盒子居中。當做公式記下來 設置子元素絕對定位，然後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/
}
3 固定定位（position：fixed）
固定當前的元素不會隨着頁面滾動而滾動
特性:
1.脫標
2.遮蓋，提升層級
3.固定不變
參考點：
設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點
如果用bottom描述，那麼是以瀏覽器的左下角爲參考點
作用：
1.返回頂部欄
2.固定導航欄
3.小廣告