position定位說明

（1）定位類別：

static(靜態)沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。

relative(相對定位)物件不可層疊、不脫離文件流，參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。

absolute(絕對定位)脫離文件流，通過 top,bottom,left,right 定位。選取其最近乙個最有定位設定的父級物件進行絕對定位，如果物件的父級沒有設定定位屬性，absolute元素將以body座標原點進行定位，可以通過z-index進行層次分級。

fixed（固定定位）這裡所固定的參照對像是可視視窗而並非是body或是父級元素。可通過z-index進行層次分級。

（2）相對定位

當position屬性值為relative時

物件原來占有的位置保留，其後面的物件按原來文件流仍然保持原來的位置

top的值表示物件相對原位置向下偏移的距離

bottom的值表示物件相對原位置向上偏移的距離

兩者同時存在時，只有top起作用。

left的值表示物件相對原位置向右偏移的距離

right的值表示物件相對原位置向左偏移的距離

兩者同時存在時，只有left起作用。

如果相對定位的物件有padding 和border 和 margin時，定位的起點不受影響。還是原來物體的位置。

（3）絕對定位

當position屬性值為absolute時

物件從文件流中抽取出來，原占有的位置被後面的物件頂替上來

top的值表示物件上邊框與瀏覽器視窗頂部的距離

bottom的值表示物件下邊框與瀏覽器視窗底部的距離

兩者同時存在時，只有top起作用；如果兩者都未指定，則其頂端將與原文件流位置一致，即垂直保持位置不變。

left的值表示物件左邊框與瀏覽器視窗左邊的距離

right的值表示物件右邊框與瀏覽器視窗右邊的距離

兩者同時存在時，只有left起作用；如果兩者都未指定，則其左邊將與原文件流位置一致，即水平保持位置不變。

在position屬性值為absolute的同時，如果有一級父物件（無論是父物件還是祖父物件，或者再高的輩分，一樣）的position屬性值為relative時，則上述的相對瀏覽器視窗定位將會變成相對父物件定位，這對精確定位是很有幫助的。注：絕對定位與文件流無關

（4）被關聯的定位

box2設定成絕對定位元素，脫離了文件流，文件流由box1-box2-box3變為box1-box3，box2以最近的定位祖先（藍色框）為參照物。

層級關係為：