學習CSS佈局的時候，對position的認識一直不是很清晰，以致於面試的時候回答的不清楚，現在好好的梳理一下這個問題。
CSS 有三種基本的定位機制：1.普通流 2.浮動 3.絕對定位
1. 普通流：除非專門指定，否則所有框（div、h1 或 p 元素常常被稱爲塊級元素。這意味着這些元素顯示爲一塊內容，即“塊框”）都在普通流中定位。即，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
2. 浮動：CSS的float屬性允許用戶對元素進行向左向右浮動
3. 絕對定位：CSS的position屬性允許用戶對元素進行定位。
下面是position的四種不同類型的屬性值及含義。
1. static：
position的默認值，一般不設置position屬性時，會按照正常的文檔流進行排列。
塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中
2. relative：
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
relative的偏移是基於對象本身的位置，基於對象margin的左上側的。
若有設置padding，則以padding內邊界開始的
3. absolute：
（1）當該元素的父級對象設置了position屬性，且position的屬性值爲absolute或者relative時，即不是默認值的情況下，當前元素按照這個parent來進行定位。
（使用absoulte，必須指定 left、right、 top、 bottom 屬性中的至少一個，否則left/right/top/bottom屬性會使用它們的默認值 auto ，這將導致對象遵從正常的HTML佈局規則，在前一個對象之後立即被呈遞，簡單講就是都變成relative，會佔用文檔空間 變成relative的效果）
（2）那元素按照這個parent來進行定位時，是按照定位點來進行定位呢？如果parent設定了margin，border，padding等屬性，那麼這個定位點將忽略padding，將會從padding開始的地方(即只從padding的左上角開始)進行定位
注意：當父級對象position設置爲absolute後，當前元素會導致溢出正常的文檔流，就像它不屬於 parent一樣，它漂浮了起來，此時它後面的同級元素將獲得當前元素的位置，它的文檔流不再基於當前元素，而是直接從父級元素開始。
4. fixed：
使用fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少一個。原因同上absolute。fixed是特殊的absolute，即fixed總是以body爲定位對象的，按照瀏覽器的窗口進行定位。