普通流中元素框的位置由元素在xhtml中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內元素在一行中水平布置。
普通流就是html文件中的元素如塊級元素、行內元素依據他們的顯示屬性按照在文件中的先後次序依次顯示。是塊級元素就佔一行或多行，是行內元素就和其他元素共處一行，沒什麼好說的，該咋顯示咋顯示，乙個蘿蔔乙個坑。
１、相對定位 (position:relative)
被看作普通流定位模型的一部分，定位元素的位置相對於它在普通流中的位置進行移動。使用相對定位的元素不管它是否進行移動，元素仍要佔據它原來的位置。移動元素會導致它覆蓋其他的框。例如： 設定元素 top:20px； left:20px; 那麼框將出現在距原本元素頂部左側各20px的地方。
對藍框進行定位後，它仍佔據原先的位置。
２、絕對定位 (position:absolute)
絕對定位的元素位置是相對於距離它最近的那個已定位的祖先(相對/絕對)元素決定的。 如果元素沒有已定位的祖先元素， 那麼它的位置相對於初始包含塊。絕對定位的元素可以在它的包含塊向上、下、左、右移動。
與相對定位相反， 絕對定位使元素與文件流無關， 因此不佔據空間。 普通文件流中其他的元素的布局不受絕對定位元素的影響。參見下圖：
對藍框定位後， 它下面的元素上移佔據了藍框原本的位置， 彷彿藍框不存在一般。
由於絕對定位的元素脫離普通流，所以它可以覆蓋頁面上的其他元素，可以通過設定ｚ-iindex屬性來控制這些框的堆放次序。
絕對定位在大多數現代瀏覽器中實現得很好， 但是在ie5.5與ie6中有乙個bug。 如果要設定絕對定位元素的right或bottom, 那麼需要確保它的"最近的相對定位的祖先元素"已經設定了尺寸。 如果沒有， 那麼ie會錯誤的相對於初始包含快（畫布）定位這個元素。 簡單的解決辦法 就是給相對定位的元素設定尺寸。 或者盡量使用 top/left定位。３、固定定位 (position:fixed)
相對於瀏覽器視窗，其餘的特點類似於絕對定位。
浮動的元素可以在左右移動，直到它的外邊框邊緣碰到包含塊或另乙個浮動元素的邊緣。浮動的元素離普通流。
如果包含塊太窄，無法容納水平排列的浮動元素，那麼其他浮動元素向下移動，直到有足夠多的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能會被其他浮動元素卡住。
行內元素會圍繞著浮動框排列。
參考：css概念 - 視覺化格式模型（二） 定位概述（普通流、絕對定位）
css中的三種基本的定位機制
css 浮動
css中的三種基本定位機制
css中的三種基本定位機制 a.普通文件流 b.定位 相對定位 絕對定位 固定定位 c.浮動 1.普通流中，元素位置由文件順序和元素性質決定，塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin值計算得到，行內元素在一行中水平布置 2.相對定位看作普通流的一部分，移動後的元素仍佔據原來的...
CSS中的三種基本的定位機制
css 有三種基本的定位機制 普通流 浮動和絕對定位。一 普通流 除非專門指定，否則所有框都在普通流中定位。普通流中元素框的位置由元素在 x html中的位置決定。塊級元素從上到下依次排列，框之間的垂直距離由框的垂直margin計算得到。行內元素在一行中水平布置。二 定位 相對定位 被看作普通流定位...
CSS有三種基本的定位機制
css有三種基本的定位機制 普通流，浮動和絕對定位.普通流 在普通流中元素框的位置由元素在html中的位置決定，1 元素position屬性為static或繼承來的static時就會按照普通流定位 2 position屬性的relative 相對定位 值時，它將出現在他所在的位置上，然後可以通過設定...