在css使用position屬性來指定元素的定位型別，該屬性有四種不同型別的定位，分別為static（預設定位）、relative（相對定位）、absolute（絕對定位）和fixed（固定定位）。
要理解以上四種定位，寫看一下css的文件流（普通流）概念：
除非專門指定，否則所有框（也就是html元素）都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (x)html 中的位置決定。
塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。若某元素的position屬性的是預設static，那這個元素就在文件流中。
relative（相對定位）：
設定為相對定位的元素不脫離文件流，參考自身的位置通過top、bottom、left和right進行定位，讓這個元素以自身原來的位置為基準進行移動，元素仍然保持其未定位前的形狀，它原本所佔的空間仍然保留（因為它沒有脫離文件流）。因此，採用相對定位的元素有可能覆蓋了其他元素，因為它其實佔據了兩個位置，乙個是移動前的位置，乙個是移動後的位置，若移動後的位置和別的元素衝突，就把別的元素覆蓋了。
absolute（絕對定位）和fix（固定定位）：
與relative（相對定位）不同，設定為absolute（絕對定位）和fixed（相對定位）的元素脫離了文件流，元素原先在正常文件流中所佔的空間會關閉，就像該元素不存在一樣。
absolute（絕對定位）元素的位置相對於最近的已定位的祖先元素，若該元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
fixed（固定定位）是相對於瀏覽器視窗的，即將設定為fixed（固定位置）的元素固定在瀏覽器的某個位置上，即使拖動瀏覽器的滾動條，該元素的位置也不會改變，有點流氓。
在css中使用float屬性用於改變塊元素物件的預設顯示方式。當塊元素物件設定了float屬性後，它將不再獨佔一行，而是可以浮動到左側或右側，知道浮動的框外緣碰到包含框或另乙個浮動框的邊框為止。注意：浮動框也不在文件流中，因此對文件流的中塊框來說，浮動框就像不存在一樣。這一點和absolute（絕對定位）屬性型別，但float和absolute還有以下不同：
1.absolute元素的位置相對於離它最近的已定位的祖先元素，它可以以父元素框的4個頂點為基準進行定位。而float屬性定位時則是根據left或right屬性值，以父元素的左上或右上為基準進行定位。
2.採用absolute屬性定位的元素不能被文字所包圍，而採用float屬性定位的元素可以被文字包圍（float最初設計的用意就是這個，用以取代html中的align屬性）。
3.float的影響可控，absolute的影響不可控。
設定float和absolute屬性的元素都脫離了文件流，因此它們都會影響到其下方的元素。但是，absolute是布局屬性，使用它時沒有一種有效的方法
使之與其下方的元素不重合在一起。
相反，若乙個元素指定了float屬性，當我們向其下方（或後面）的元素的應用了clear屬性後（clear:left；clear:right；clear:both），其後的元素就不再受影響了。所以一般在網頁布局時，更多的使用float屬性。
css 定位連線 css絕對定位
定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...
CSS定位 浮動定位
css定位機制 浮動定位 float屬性 進行浮動定位 left，right clear屬性 清除浮動 left，right，both float屬性 1.概述 div實現橫向多列布局 float屬性 left 左浮動 right 右浮動 none 不浮動 下圖為 的實現 float屬性用途 在 混...
CSS 定位2 絕對定位
設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。1 從文件流中刪除，原來占用的空間釋放 2 絕對定位的元...