Absolute（絕對定位）與relative（相對定位）的圖文講解
Position的屬性值有：
1. Absolute：絕對定位，是相對於最近的且不是static定位的父元素來定位
2. Fixed：絕對定位，是相對於瀏覽器窗口來定位的，是固定的，不會跟屏幕一起滾動。
3. Relative：相對定位，是相對於其原本的位置來定位的。
4. Static：默認值，沒有定位。
5. Inherit：繼承父元素的position值。
對於初學者來說，position的屬性很讓人頭疼，特別是absolute與relative之間的區別，接下來我就以圖文講解的方式來給大家講解一下這兩者之間的不同之處。
首先設置4個div：
<body>
<div class="div1">第一個div</div>
<div class="div2">第二個div</div>
<div class="div3">第三個div</div>
<div class="div4">第四個div</div>
</body>
添加背景色，效果如下：
給第二個div設置absolute:
.div2{
height:100px;
background-color: blueviolet;
position:absolute;
top:50px;
left:50px;
}
效果如圖：
第二個div設置了absolute,則該div的寬度就由文本決定，且下面的div會上移占據之前第二個div的位置，top和left是相對於離它最近且不是static定位的父元素來定位的，在此div2因為沒有父元素，所以第二個div相對於根元素即html元素來定位。
將第二個div設置為relative：
.div2{
height:100px;
background-color: blueviolet;
position:relative;
left:50px;
top:50px;
}
效果如圖：
設置relative的div不會影響其他div的位置，且top和left是相對於它原本自身的位置來定位。
給第二個div添加一個父div：
<body>
<div class="div1">第一個div</div>
<div class="container1">
第二個div的父div
<div class="div2">第二個div</div>
</div>
<div class="div3">第三個div</div>
<div class="div4">第四個div</div>
</body>
.container1{
position:absolute;
height:200px;
background-color: greenyellow;
}
.div2{
height:100px;
background-color: blueviolet;
position:absolute;
top:50px;
left:50px;
}
效果如圖：
div2的父div設置為absolute，下面的div3,div4會上移，div2也設置為absolute，div2就會相對於父div來定位。
若將div2即第二個div的absolute改為relative：
.div2{
height:100px;
background-color: blueviolet;
position:relative;
top:50px;
left:50px;
}
則效果圖如下：
註意，上面兩個圖的第二個div與父div的上邊距是不同的，第一個是相對父div來定位，第二個是相對原來本身的位置來定位。可能此時你會註意到兩個圖的第二個div的寬度不同，在沒有給div設置寬度的情況下，第一個是設為absolute，所以寬度為文本寬度，第二個是relative，所以寬度與父元素寬度相同。
若保持上面的兩種情況，都將第二個div的寬度設為500px，得到效果如下：
由上圖可以知道，absolute定位的子元素寬度不會影響父元素的寬，而relative定位的子元素會撐大父元素。
總結：
Absolution：元素會脫離文檔流，定位是相對於離它最近的且不是static定位的父元素而言，若該元素沒有設置寬度，則寬度由元素裏面的內容決定，且寬度不會影響父元素，定位為absolution後，原來的位置相當於是空的，下面的的元素會來占據。
Relative：元素仍處於文檔流中，定位是相對於原本自身的位置，若沒有設置寬度，則寬度為父元素的寬度，該元素的大小會影響父元素的大小。
Absolute（絕對定位）與relative（相對定位）的圖文講解