CSS 屬性篇(一)：relative與absolute
首先基本瞭解下position的各個屬性值：
1、static：預設值。沒有定位，元素在正常顯示出現（它將忽略top、bottom、left、right、z-index宣告）
2、relative：生成相對定位的元素，相對於其正常位置進行移動。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
3、absolute：生成絕對定位的元素，相對於position屬性定義為static之外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
4、fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
*static屬性值和fixed屬性都非常的容易理解，我們主要對relative屬性值和absolute屬性值進行說明。
二、relative
1、定位為relative的元素，雖然可以脫離正常的文件流進行移動，但是其本身在文件流中佔據的位置仍然保留。如下圖所示：
relative元素進行移動是相對於其本身原來位置進行移動，並且當它移動之後，它仍然佔據著原來位置的空間。
三、absolute
定位為absolute的元素，也是脫離正常的文件流，並且其本身在文件流中佔據的位置不再保留。如下圖所示：
其中黃色背景為absolute的元素，藍色背景被普通元素，紅色背景為二者的父元素（父元素被定義為relative）。
如圖所示，absolute元素進行移動是相對於離它最近的定義了position屬性並且屬性值不為static的父層元素進行移動（這個父層元素可以不是其直接父層）。如果其父層全部都未定義除static之外的position屬性，那麼它將相對於瀏覽器顯示窗體元素進行移動而非html標籤元素。1、absolute元素的父元素並沒有設定position屬性，而其祖父元素設定了position屬性，absolute元素則相對祖父元素進行移動。
2、absolute元素的父元素並設定position:static屬性，而其祖父元素設定了position:relative屬性，absolute元素則相對祖父元素進行移動。
3、absolute元素的父元素並設定position:relative屬性，祖父元素也設定了position:relative屬性，absolute元素則相對父元素進行移動。 
4、absolute元素的父元素和祖父元素都沒有設定position屬性，absolute元素則相對瀏覽器顯示窗體元素(注意：不是html元素)進行移動。 
5、如下圖所示，在沒有設定移動屬性(left,right,top,bottom)時，absolute元素處於正常佈局中所處的位置，只是屬於“浮在空中”的狀態，不佔據文件流空間。
四、注意
對於上文中，absolute元素如果其父層全部都未定義除static之外的position屬性，那麼它將相對於瀏覽器顯示窗體元素進行移動而非html標籤元素有異議的，我們可以試試一下的程式碼一試便知。
body,html {
margin-top:50px;
height:300px;
}
div {
width:200px;
height:200px;
background:red;
position:absolute;
top:20px;
}
複製程式碼 結果分析：
1、如果div元素距離頂部只有20px，則div是相對瀏覽器顯示視窗移動。
2、如果div元素距離頂部為70px（html的margin-top:50px + top:20px），則div是相對html元素移動。
3、如果div元素距離頂部為120px（html的margin-top:50px + body的margin-top:50px + top:20px），則div是相對body元素移動。
程式碼傳送門：案例程式碼 by madman0621 (@madman0621) on CodePen.