1、定位體系的意義
2、定位體系的分類
3、常規流：( normal flow )
4、浮動（floats）
5、絕對定位（absolute positioning）
6、選擇定位方案
css2.1中，乙個框(box，就是元素形成的方塊等)可以根據三種定位體系布局。css2.1中的定位體系幫助作者使他們的文件更容易理解，並不需要使用標記的手段（如，不可見的）達到布局的效果。
格式化上下文決定了視覺化格式模型中框的形式，定位體系布局決定了這些框在頁面中如何布局。
元素在布局時，根據3種定位體系定位。分別是，常規流、浮動和絕對定位。
常規流，是對 normal flow的直譯。
流者，動也。偏旁是三點水，說明，跟水有關係，水的流動是連續不間斷的，也是有先後順序的。在這裡，我們把它當作可以流動的(位置可變)，有先後順序(元素順序載入)的體系。在文件載入的時候，好像流水似的，一點點的漫過整個畫布。還有一種說法是，瀏覽器在解析html css js 的時候的乙個流式的過程，從html起始標籤開始 到html結束標籤截止。
之所以是常規，是因為，這是相對於後面的浮動和定位的乙個概念，浮動和定位元素都脫離了當前的常規流。
在 css2.1中，常規流包括塊框(block boxes)的塊格式化(blok formatting 後續會講到)，行內框(inline boxes)的行內格式化(inline formatting 後續會講到)，塊框或行內框的相對定位，以及插入框的定位。
在 css 中，元素定義的環境有兩種，一種是塊格式化上下文( block formatting context )，另一種是行內格式化上下文( inline formatting context )。 這兩種上下文定義了在 css 中元素所處的環境，格式化則表明了在這個環境中，元素處於此環境中應當被初始化，即在常規流中的框，都屬於乙個格式化的上下文中等。
浮動，顧名思義，相對於常規流來講，它漂浮在常規流的上方。因為它不再處於文件流中，所以它不佔據空間。
在浮動模型中，乙個框(box)首先根據常規流布局，再將它從流中取出並盡可能地向左或向右偏移。內容可以沿浮動區的側面排列。因為它首先要根據常規布局後才偏移，所以效率較常規流低。
用 『float』 特性宣告浮動，特性值可以是：」none」、」left」、」right」。
在絕對定位模型中，乙個框(box)整個地從常規流向中脫離（它對後續的兄弟元素沒有影響），並根據它的包含塊來分配其位置。
『float』和』position』特性決定了使用哪種css2.1定位演算法來計算框的位置。
不同的position選擇不同的定位演算法。
6.1、static
該框(box)是乙個常規框，布局根據常規流。'left' 、』right』、』bottom』和 'top'屬性不適用。
如果 『position』沒有設定，預設值也是』static』。這時，設定'left' 、』right』、』bottom』和 'top』，無效。
6.2、relative
框的位置根據常規流計算（被稱為常規流中的位置）。然後框相對於它的常規位置而偏移。如果框 b 是相對定位的，其後框的定位計算並不考慮 b 的偏移。 table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, 和 table-caption 元素的 『position:relative』 效果沒有被定義。
相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。
框的位置（可能還有它的尺寸）是由』left』，』right』，』top』和』bottom』特性決定。這些特性指定了框相對於它包含塊的偏移量。 絕對定位（」position: absolute」）元素的包含塊由離它最近的 『position』 屬性為 『absolute』、』relative』 或者 『fixed』 的祖先元素建立。絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。根據使用者的**不同，最初的包含快可能是畫布或html元素。
絕對定位的框從常規流向中脫離。這意味著它們對其後的兄弟元素的定位沒有影響。另外，儘管絕對定位框有外邊距(margin)， 它們不會和其它任何外邊距發生摺疊（collapsing margins）。
因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性來控制這些框的堆放次序。
框位置的計算根據'absolute'模型，不過框要額外地根據一些參考而得到固定。跟絕對定位一樣，fixed定位元素的margin不會和任何其他 margin發生margin摺疊。應用於手持終端、投影裝置、螢幕、tty、電視**型別時，框相對於 viewport 固定，滾動時不移動。應用於列印媒介型別時，框被渲染於每一頁，並相對於頁框固定，就好象是通過viewport檢視該頁一樣（例如，列印預覽）。對於其他的媒介型別，表現沒有被定義。
css定位體系
相對位置 是指盒子在原本定位體系 常規流 下的位置，將盒子的position屬性設為relative，啟動相對位置 特點 1.依然占用原來的尺寸 2.不會影響其他的元素位置 固定位置 將盒子的position屬性設為fixed，啟動固定位置 特點 1.起始點在視口的左上角 2.脫離文件流 不佔位置 ...
css定位機制
定位屬性position 相生相剋 1 static 靜態定位 2 relative 相對定位 相對於自己原來的位置定位 3.absolute 絕對定位 float 具有強大的破壞性，父容器管不住 4.fixed 固定定位 相對於瀏覽器定位不是相對於文件定位 css其他定位屬性 1 z index ...
CSS定位機制
在css的定位機制中，分別有如下三種 1.文件流 2.浮動 float 3.定位 position 所謂文件流，即元素排版布局過程中，元素會自動從左往右，從上到下的流式排列。脫離文件流，即將元素從普通的布局排版中拿走 打亂排列順序 其他盒子在進行定位的時候，會當做脫離文件流的元素不存在而進行定位。p...