CSS的相對定位與絕對定位
position用於設定物件的定位方式
1.static為其靜態的預設值，即無特殊定位
2.relative:相對定位
特點：佔位，相對於自身原有位置進行偏移，仍處於標準文件流中，其依據top,bottom,left,right,z-index等屬性進行位置偏移。
如何理解？對於某一元素設定了相對定位後，首先這個元素會跟其他元素一樣，出現在文件流中它應該出現的位置，然後我們可以通過以上的五個屬性，對它設定水平或垂直偏移量，使這個元素相對於它在文件流的起始位置進行偏移。注意：在使用相對定位時，元素雖然被偏移了，但它的起始位置仍被佔據著。
例:設定三個浮動的塊

.b1{
    width: 100px;
    height: 80px;
    background-color: #b540ff;
}
.b2{
    width: 100px;
    height: 80px;
    background-color: coral;
}
.b3{
    width: 100px;
    height: 80px;
    background-color: darkblue;
}
 

然後，給第二塊使用相對定位，position:relative; 並設定偏移量top:20px; left:50px; 可看到如下圖所示結果

總結：位置有了偏移，說明它原先所佔據的位置還在，不會被第三個塊過來填充掉；並且它的偏移不會把其他元素從原來位置擠開，而是會覆蓋在第三塊上，這時我們可以通過z-index屬性來調整它們的層疊順序。
3.絕對定位：absolute
特點：不佔位，將物件從文件流中拖出，通過width、height、left、right、top、bottom等屬性與margin、padding、border進行絕對定位。絕對定位的元素可以有邊界，但這些邊界不壓縮。其層疊關係通過z-index屬性定義。
例：設定兩個浮動塊

.b1{
    width: 200px;
    height: 200px;
    background-color: aquamarine;
}
.b2{
    width: 100px;
    height: 100px;
    background-color: chartreuse;
}

給第二塊使用絕對定位，position：absolute; 並設定偏移量top:-50px; left:-20px; 可看到如下圖所示結果

總結：這時我們發現第二塊不佔它的起始位置進行偏移，說明它原先的位置不存在了。
4.其他定位與絕對定位混合使用
特點：相對於最近的已定位的祖先元素，有已定位（指position不是static的元素）祖先元素，以最近的祖先元素為參考標準。如果無已定位祖先元素，則以body元素為偏移參考基準，完全脫離了標準文件流。
例：設定四個浮動塊

<div class="a1">   <!--設定了定位屬性，但不是最近的定位祖先元素，不是參照物-->
    <div class="a2">   <!--設定了定位屬性，也是最近的定位祖先元素，是參照物-->
            <div class="a3">英語</div>
            <div class="a4">數學</div>   <!--這個塊中後來設定了絕對定位-->
    </div>
</div>

然後，給數學塊新增一個position:absolute；設定top:100px; left:40px;這時可看到如下圖所示結果