最近熱衷於前端的開發，因爲突然發現雖然對於網站、應用來說，功能處於絕對重要的地位，但是用戶體驗對於用戶來講同樣是那麼的重要，可以說是第一印象。最近在開發當中發現以前對於css中的position的理解有些偏頗，在這裏分享一下這幾天的學習。
首先總體介紹一下接下來要分析的position屬性的兩個值：absolute和relative（絕對定位和相對定位），
絕對定位：1、當某元素使用絕對定位並且未設置top，left的值時，實際上並未真正脫離文檔流，2、使用絕對定位並且設置了top，left時，這才脫離了文檔流，並以最外層body元素作爲父容器，
相對定位：1、當某元素使用相對定位時，無論設不設置top，left的值，都不會脫離文檔流
接下來以實驗論證我的觀點，貼出一段實驗小代碼
<!DOCTYPE html>
<html>
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body οnlοad="init();">
<div style="width: 400px;height:400px;border: cadetblue 2px solid;">
<div style="width: 300px;height: 30px;border: 2px solid red;">
</div>
<div style="position: absolute;width: 80px;height: 30px;border: 2px solid orange;" id="absolute">
</div>
<div style="position: relative;width: 160px;height: 60px;border: 2px solid blueviolet;left: 150px;" id="relative">
</div>
</div>
</body>
<script>
function init(parameters) {
var absoluteStr = "absolute :top=" + absolute.offsetTop + ",left=" + absolute.offsetLeft;
absolute.innerHTML = absoluteStr;
var relativeStr = "relative :top=" + relative.offsetTop + ",left=" + relative.offsetLeft;
relative.innerHTML = relativeStr;
}
</script>
</html>
相信這個就不用多做解釋了，外層一個div，裏面有三個div，第一個是普通div，接下來一個id是absolute，另一個是relative，擺明了就是分別測試absolute和relative的。
我們在init函數中分別將absolute和relative的div的內容顯示兩個div分別的top和left
最外層div距離瀏覽器上邊框10px，裏面第一個（紅色）div高度爲30，在absolute和relative中可以看出top的值是一樣的，那麼是不是就說明無論是absolute還是relative在這個時候都未脫離文檔流，因爲他們被上面第一個div擠下來了，接下來分別將absolute和relative兩個div設置 top=100px,那麼結果如下：
由上圖可以看出，設置了top之後，absolute這個元素的top值是100px，而relative的top值卻是144px，說明absolute這個元素是脫離了文檔流以body爲父元素的，而relative中的144=100+44，說明relative是以外層div爲父容器，並且未脫離文檔流，在上一個（紅色）div的基礎上向下平移了100px，由此證明了以上論斷。
position屬性值還有fixed，和默認值static，以及top，left的用法還有很多注意事項，以後慢慢再說。