一般情況下 頁面元素的定位方式是根據文檔流也就是說默認的從上到下，從左到右的方式進行排列的，而將元素從文檔流脫離出來顯示的方式有兩種，一種是 position 定位另一種是float 浮動，這里我們詳細介紹下position的用法。
position 常用的四種屬性：
1 static（默認屬性） 2 relative（相對屬性） 3 fixed（固定屬性）4 （absolute 絕對屬性）
position四種屬性的用法：
static（默認屬性）：
這個沒什么好說的就是將就是將定位方式還原到之前所提到的文檔流的方式（也就是從上到下，從左到右的進行排列的方式 ）這時候會忽略 top, bottom, left, right 或者 z-index 聲明。
relative（相對屬性）：
這個屬性是指元素會依據自己原先的位置為基准進行偏移，但是其原先位置依然會存在，不會干擾相鄰的元素。
以div1，div2，div3，div4 為例，其原始位置為下圖
我們以div2 為例，設置position：relative屬性，代碼及圖如下：
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 .di1,.di2,.di3,.di4{ 6 width: 100px; 7 height:100px; 8 text-align:center; 9
10
11
12 } 13 .di1{ 14 background-color: blue; 15
16
17 } 18 .di2{ 19 background-color: green; 20 position: relative; 21 left:100px; 22 top:100px; 23
24
25 } 26 .di3{ 27 background-color: red; 28
29 } 30 .di4{ 31 background-color: cornflowerblue; 32
33
34
35 }
通過圖片我們可以看到 div2 是以原先自己所在的位置向左 向上各偏移了100px；其原先的位置仍然會被保留 不會影響相鄰的元素
3 fixed（固定屬性）
這個屬性是指以瀏覽器為基准進行偏移 並且不管怎么拖動滾動條，它都會保持原先的位置
4 （absolute 絕對屬性）
絕對定位，當有一級父對象（無論是父對象還是祖父對象）的Position屬性值為Relative或者absolute時，則上述的相對瀏覽器窗口定位將會變成相對父對象定位，這對精確定位是很有幫助的以父級元素為基礎進行定位，若沒有父級定位則以瀏覽器為基准進行定位 並且會影響相鄰的元素
我們依然以div2 為例，設置屬性為absolute，代碼及圖片如下
.di1{ background-color: blue; } .di2{ background-color: green; position: absolute; left:100px; top:100px; } .di3{ background-color: red; } .di4{ background-color: cornflowerblue; }
可以看到下邊的元素div3元素並沒有設置定位 但是其偏移到了div2 原先的位置 ，
這就是我理解的position的用法，我也是之前學的，最近重新學習下，如果有什么不對的，還希望大家幫忙指正。