CSS之定位&浮動

    定位和浮動

定位的基本思想：容許定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。

CSS position 屬性值

static

元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。

absolute

元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

提示：相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。

CSS 相對定位（relative）

若是對一個元素進行相對定位，它將出如今它所在的位置上。而後，能夠經過設置垂直或水平位置，讓這個元素「相對於」它的起點進行移動。

若是將 top 設置爲 20px，那麼框將在原位置頂部下面 20 像素的地方。若是 left 設置爲 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。

#box_relative {

  position: relative;

  left: 30px;

  top: 20px;

}

以下圖所示：

 

注意，在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框。

CSS 絕對定位（absolute）

設置爲絕對定位的元素框從文檔流徹底刪除，並相對於其包含塊定位，包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

絕對定位使元素的位置與文檔流無關，所以不佔據空間。

這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。

普通流中其它元素的佈局就像絕對定位的元素不存在同樣：

#box_relative {

  position: absolute;

  left: 30px;

  top: 20px;

}

以下圖所示：

 

絕對定位的元素的位置相對於最近的已定位祖先元素，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

總結：相對定位是「相對於」元素在文檔中的初始位置，而絕對定位是「相對於」最近的已定位祖先元素，若是不存在已定位的祖先元素，那麼「相對於」最初的包含塊。

PS 1）根據用戶代理的不一樣，最初的包含塊多是畫布或 HTML 元素。

   2）由於絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其它元素。能夠經過設置 z-index 屬性來控制這些框的堆放次序。

CSS 浮動

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

position:relative、position:absolute和float均可以改變元素在文檔流中的位置。

設置position:relative或position:absolute均可以讓元素激活left、top、right、bottom和z-index屬性。默認狀況下，這些屬性未激活，設置了無效。

z-index：雖然網頁看起來是平面的二維結構，但它其實也是有z軸的，z軸的大小由z-index來控制。默認狀況下，全部元素都是在z-index:0這一層的。元素根據本身的display類型、長寬、內邊距等屬性順序排列在z-index:0這一層裏，即文檔流。

設置position:relative或position:absolute會讓元素「浮」起來，即z-index值大於0，這會改變正常狀況下的文檔流。

不一樣點：position:relative會保留本身在z-index：0層得佔位，left、top、right、bottom值是相對於本身在z-index:0層得位置。雖然它的實際位置可能由於設置了left、top、right、bottom值而偏離原來在文檔流中的位置，但對其餘仍然在z-index:0層得元素不會形成影響。而position:absolute會徹底脫離文檔流，再也不在z-index:0層保留佔位符，其left、top、right、bottom值是相對於本身最近的一個設置了position:relative或position:absolute的祖先元素的，若是祖先元素所有沒有設置position:relative或position:absolute，那麼就相對於body元素。

float屬性不會讓元素「上浮」到另外一個z-index層，它仍然讓元素在z-index:0層排列。且，它不能經過left、top、right、bottom屬性精確地控制元素的座標，只能經過float:left和float:right來控制元素在同層裏「左浮」和「右浮」。float會改變正常的文檔流排列，影響到周圍元素。

position:absolute和float會隱式地改變display類型，不論以前什麼類型的元素，只要設置了position:absolute、float:left或float:right中任意一個，都會讓元素以display:inline-block的方式顯示：能夠設置長寬，默認寬度不沾滿父元素。就算咱們顯式地設置display:inline或者display:block也仍然無效。

可是，position:relative卻不會隱式地改變display的類型。