談到CSS的定位機制時都會提到一個關鍵詞“文件流”。那麼什麼是文件流呢？將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為[size=x-large]文件流[/size]。

CSS的定位機制有3種：[color=blue]普通流、浮動（float：left/right/none）和定位 （position:static/relative/absolute/）[/color]。

普通流中的元素的位置由元素在 (X)HTML 中的位置決定。浮動元素不佔任何正常文件流空間，而浮動元素的定位還是基於正常的文件流，然後從文件流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文件流中抽出後，仍然在文件流中的其他元素將忽略該元素並填補他原先的空間。 詳見：[url]http://www.w3school.com.cn/css/css_positioning.asp[/url]


基於文件流, 我們可以很容易理解以下的定位模式:

[u][size=x-large]相對定位relative：[/size][/u]相對於元素在文件流中位置進行偏移. 但保留原佔位。相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
[u][size=x-large]絕對定位absolute：[/size][/u]完全脫離文件流, 相對於position屬性非static值的最近父級元素進行偏移。
[u][size=x-large]固定定位static：[/size][/u]完全脫離文件流, 相對於視區進行偏移。
[u][size=x-large]絕對定位fixed：[/size][/u]元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。


position的absolute與fixed共同點與不同點：
A：共同點：
1.改變行內元素的呈現方式，display被置為block；2.讓元素脫離普通流，不佔據空間；3.預設會覆蓋到非定位元素上
B不同點：
absolute的”根元素“是可以設定的，而fixed的”根元素“固定為瀏覽器視窗。當你滾動網頁，fixed元素與瀏覽器視窗之間的距離是不變的。