[轉]relative、absolute和float

position:relative和position:absolute均可以改變元素在文檔中的位置，都能激活元素的left、top、right、bottom和z-index屬性。（默認這些屬性未激活，設置了也無效）

　　設置position:relative和position:absolute都會讓元素浮起來，會改變正常狀況下的文檔流。

　　不一樣：

　　position:relative會保留本身在z-index:0層的佔位，left、top、right、bottom值是相對於本身在z-index層的位置。

　　position:absolute會徹底脫離文檔流，再也不z-index:0層保留佔位符，其left、top、right、bottom值是相對於本身最近的一個設置了position:relative或position:absolute的祖先元素的，若是祖先元素全都沒有設置，那麼就相對於body元素。

 

　　float也能改變文檔流，不一樣的是，float不會讓元素浮到另外一個元素上面，它仍然讓元素在z-index:0層排列，只能經過float:left和float:right來控制元素在同一層裏"左浮"和"右浮"。float會改變正常的文檔流排列，影響周圍元素。

 

　　position:absolute和float會隱式的改變display類型，不論以前什麼類型的元素（display:none除外）,只要設置了position:absolute和float中任何一個，都會讓元素以display:inline-block的方式顯示：能夠設置長寬，默認寬度並不佔滿父元素。就算顯示的設置display:inline或者display:block，也仍然無效（IE6雙倍邊距BUG利用display:inline解決）。

　　position:relative卻不會隱式改變display類型。