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）被關聯的定位

<div ——————————— position:relative;最近的祖先定位元素，參照物

   <div—————————-沒有設定為定位元素，不是參照物

     <div———————-沒有設定為定位元素，不是參照物

       <div box1

       <div box2 ——–position:absolute; top:50px; left:120px;

       <div box3

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

層級關系為：

<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物

     <div———————- position:relative 參照物

本文轉自 韬光星夜 51CTO部落格，原文連結：http://blog.51cto.com/xfqxj/477070，如需轉載請自行聯系原作者