css的定位機制分為三種，分別是文件流，浮動和定位。
其中文件流的意義就
是按照html裡面的寫法從上到下從左到右的布局。
浮動包括兩種，左浮動和右浮動，直到它的外邊框邊緣碰到包含框或另乙個浮動框的邊緣。任意的浮動使元素脫離了文件的普通流，就像在文件中不佔據空間。但如果包含塊太窄，無法容納水平排列的浮動元素，那麼其他浮動塊會向下移動，直到有足夠多的空間。
position 屬性規定元素的定位型別。但是任何的版本的 internet explorer （包括 ie8）都不支援屬性值 「inherit」。下面主要理解一下position的幾個不同的定位型別。
首先要明確，position定位從**開始？對於設定了padding，margin的元素，這一點十分很重要了。
設定了position屬性的元素在父元素的border內部進行定位但不包括border。具體看一下這四個值的規定：
absolute ：
生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。 元素的位置通過 「left」, 「top」,」right」 以及 「bottom」 屬性進行規定。absolute生成絕對定位的元素，它的定位是相對於static定位以外的第乙個父元素進行定位，也就是說如果父元素沒有明確設定position屬性，元素將繼續向外尋找，直到遇到第乙個position屬性不為static屬性的元素為父元素進行定位。並且，absolute使元素脫離了文件流，不佔據空間。可以覆蓋頁面上的其他元素，可以通過設定ｚ-iindex屬性來控制這些框的堆放次序。z-index越大，顯示的優先順序越高。
fixed ：
生成絕對定位的元素，相對於瀏覽器視窗進行定位。 元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」屬性進行規定。fixed生成絕對定位的元素，它的定位相對於瀏覽器視窗進行定位。因此，它在瀏覽器中的顯示是固定的，隨著滾動條的滾動其位置不發生變化。這種定位方式也使元素脫離了文件流，不佔據空間。
relative ：
生成相對定位的元素，相對於其正常位置進行定位。 因此，」left:20」 會向元素的 left 位置新增 20 畫素。static ：
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。如果元素沒有設定定位屬性，那麼它的position為預設static即沒有定位。它的文件流按照普通html文件從上到下從左到右進行布局。inherit 規定應該從父元素繼承 position 屬性的值。
CSS 定位position屬性
div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即 塊框 與之相反，span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中，即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block，可以讓行內元素...
css實踐 position定位
position 用於設定目標物件的定位方式，一般有absolute relative static三個選項，設定後均可設定top bottom right left距離 absolute 允許物件漂浮於頁面之上，無須考慮周圍布局，如果父元素設定為static或者沒有設定，將以父元素的父元素為參考係...
CSS 定位屬性position
一 position 屬性 規定元素的定位型別。即元素脫離文件流的布局，在頁面的任意位置顯示。有4種不同型別的定位 absolute 絕對定位 脫離文件流的布局，遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相...