CSS-position:static/relative/absolute/fixed定位
static（靜態定位）
對象遵循標準文檔流中，top, right, bottom, left 等屬性失效。relative（相對定位）
對象遵循標準文檔流中，依賴top, right, bottom, left 等屬性相對於該對象在標準文檔流中的位置進行偏移，同時可通過z-index定義層疊關係。absolute（絕對定位）
對象脫離標準文檔流，使用top, right, bottom, left 等屬性進行絕對定位（相對於static定位以外的第一個父元素進行絕對定位） 同時可通過z-index定義層疊關係。fixed（固定定位）
對象脫離標準文檔流，使用top, right, bottom, left 等屬性進行絕對定位（相對於瀏覽器窗口進行絕對定位）同時可通過z-index定義層疊關係。
迷糊不？（迷糊就對了，但是上面的基本定義在前端面試中是需要對答如流滴），下面我們通過實驗來加深理解。
- 標準文檔流
標準文檔流指在不使用其他與排列和定位相關的特殊CSS規則時，元素的默認排列規則。
HTML文檔中的元素可以分爲兩大類：行內元素和塊級元素。
1.行內元素，是DOM樹中的一個節點。不佔據單獨的空間，依附於塊級元素，行內元素沒有自己的區域。2.塊級元素，是DOM樹中的一個節點。總是以塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到包含它的元素的邊界，在水平方向不能並排。
盒子在標準流中的定位原則：
margin控制的是盒子與盒子之間的距離，padding存在於盒子的內部它不涉及與其他盒子之間的關係和相互影響問題，因此要精確控制盒子的位置，就必須對margin有更深入的瞭解。
（1）行內元素之間的水平margin
當兩個行內元素緊鄰時，它們之間的距離爲第一個元素的右margin加上第二元素的左margin。 （2）塊級元素之間的豎直margin
兩個豎直排列的塊級元素，它們之間的垂直距離不是上邊的第一個元素的下margin和第二個元素的上margin的總和，而是兩者中的較大者。這在實際製作網頁的時候要特別注意。
（3）嵌套盒子之間的margin
這時子塊的margin以父塊的content爲參考進行排列。
（4）margin設爲負值
會使設爲負數的塊向相反的方向移動，甚至會覆蓋在另外的塊上。
1. static
默認的position值,無特殊定位，遵循標準文檔流，不做過多解釋。
圖一：標準文檔流
2. relative
圖二：相對定位
由圖二可見，relative是相對該對象處於標準文檔流中的位置依據left,top進行定位（當然還可以使用right，bottom，本例僅作實驗說明，其餘讀者自行驗證），left,top 並不改變該對象原本在文檔流中的佔位空間。
圖三：相對定位
由圖三可見，當設置了margin屬性時，該對象在標準文檔流中的佔維空間也隨之改變。 同理，padding也會改變相對定位的對象在標準文檔流中的佔維空間，如圖四。
圖四：相對定位
至此，relative（相對定位）大家已經很清楚了吧，下面看下absolute的用法。
3. absolute
圖五：絕對定位
由圖五可見，絕對定位脫離標準文檔流，相對於static定位以外的第一個父元素，使用left,top（或right,bottom)進行絕對定位。值得一提的是在使用absolute定位時，必須指定left,top,right,bottom中的至少一個（否則left/right/top/bottom屬性會使用它們的默認值 auto ，這將導致對象遵從標準文檔流，在前一個對象之後立即被呈遞，簡單講就是都變成relative，會佔用文檔空間）。
如果同時設置了left/right 屬性，那麼left生效。同理top/bottom同時存在時，top生效。
圖六：絕對定位
圖七：絕對定位
由圖六、圖七可見，absolute實質上是相對於static定位以外的第一個父元素的border進行定位。
同時絕對(absolute)定位對象在可視區域之外會導致滾動條出現。而放置相對(relative)定位對象在可視區域之外，滾動條不會出現。
4. fixed
圖八：固定定位
由圖八可見，fixed定位也脫離了標準文檔流，與absolute不同的是fixed是根據窗口爲原點進行偏移定位的，也就是說它不會根據滾動條的滾動而進行偏移。
5. z-index
如果兩個同級元素的此屬性具有同樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。需要注意的是，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。
關於position定位，以上。 另外上面的實驗均在https://jsfiddle.net/上完成。