[p=22, null, left]概要：
本文主要描述xhtml中相對定位和絕對定位各自的本質、用法、區別和兩者之間的關係。以及使用css的left、right、top、bottom屬性（偏移屬性）和margin屬性（外邊距）對定位塊級元素進行布局的方法。
[p=22, null, left]說明：
佔位空間：元素在文件流中所佔據的空間。
物理空間：元素本身所佔據的空間。
[p=22, null, left]下面分3種情況分別對相對定位和絕對定位進行討論：
1.只使用css第一組屬性布局定位元素的情況
2.只使用css第二組屬性布局定位元素的情況
3.混合使用第一組和第二組屬性的情況
[p=22, null, left]圖1為未定位時的初始效果，
層級關係為：
[p=22, null, left]一、用相對定位布局塊級元素
元素設定position值： position:relative
此屬性值的設定，元素沒有脫離文件流，還是普通流定位模型的一部分，會對文件流中其它元素布局產生影響。（說明：藍色代表佔位空間，紅色代表元素）
[p=22, null, left]1.僅使用left、right、top和bottom屬性布局相對定位元素的情況
元素原本所佔的佔位空間仍保留，物理空間偏移。
[p=22, null, left]圖2中，設定元素的left和top的值，對box2進行布局，可以發現除了box2偏移之外，其他塊級元素的位置沒有被影響，可見box2的佔位空間還是存在的。
層級關係為：
[p=22, null, left]2.僅使用margin屬性布局相對定位元素的情況
用margin-bottom屬性和margin-top屬性設定負值可以改變文件流中所佔空間的高度，會影響文件流中的其它元素位置。例如：margin-top:負值; margin-bottom:負值
[p=22, null, left]圖3中，box1和box2都設定了元素margin-bottom的值，值等於它們高度的負值。box1和box2物理空間沒有改變，佔位空間高度為0。box3的margin-bottom值設定為0，物理空間沒有改變，佔位空間高度不變。再通過margin-left對box2和box3設定左偏移值。
層級關係為：
[p=22, null, left]
[p=22, null, left]3.混合使用left、right、top和bottom屬性與margin屬性布局相對定位元素的情況
此情況，它們的值會產生累加的效果。在css2.1中所有的瀏覽器都使用外邊距邊界來完成 偏移計算。本文從數學的角度理解為偏移屬性值和外邊距屬性值累加。
[p=22, null, left]圖4中，box2是在圖3的基礎上增加設定left的值產生的效果，可見margin-left的值和left的值產生了累加。(偏移量0px = 110px – 30px)
層級關係為：
[p=22, null, left]二、用絕對定位布局塊級元素
設定position值：position:absolute;
此屬性值的設定，元素從文件流完全刪除。
[p=22, null, left]1.僅使用left、right、top和bottom屬性布局絕對定位元素的情況
絕對定位的元素的偏移位置以最近的定位(包括相對定位和絕對定位)祖先元素作參照物。如果元素沒有已定位(包括相對定位和絕對定位)的祖先元素，那麼它的參照物為最頂級元素（由於瀏覽器的預設參照物不同，物可能是body或 html 元素）。
注意：ie下參照物需設定寬度或高度bottom和right屬性才可以正確的定位。
[p=22, null, left]設定元素為絕對定位元素後，元素的left、 right、top和bottom屬性預設值不是0，只是將元素脫離文件流。以下例子說明這個問題。
在圖5中，將橘黃色的祖先元素設定為定位元素（即參照物），box2設為絕對定位，文件流由box1-box2-box3變為box1-box3，可box2卻沒有移動到距離參照物0值的位置上，可見box2的left、 right、top和bottom屬性預設值不等於0，它只是脫離了文件流而已。
層級關係為：
[p=22, null, left]以最近的祖先定位元素為參照物的情況
圖6中，box2設定成絕對定位元素，脫離了文件流，文件流由box1-box2-box3變為box1-box3，box2以最近的定位祖先（藍色框）為參照物。
層級關係為：
[p=22, null, left]圖7中，為改變參照物（橘色框）後的效果
層級關係為：
[p=22, null, left]圖8中，參照物為最頂級的元素情況。
層級關係為：
[p=22, null, left]2.僅使用margin屬性布局絕對定位元素的情況
此情況，margin-bottom 和margin-right的值不再對文件流中的元素產生影響，因為該元素已經脫離了文件流。另外，不管它的祖先元素有沒有定位，都是以文件流中原來所在的位置上偏移參照物。
[p=22, null, left]圖9中，使用margin屬性布局相對定位元素。
層級關係為：
[p=22, null, left]ie6的情況下，box2前面沒有兄弟節點，則margin-left的值會出現雙倍邊距，見圖10。
層級關係為：
[p=22, null, left]3.混合使用left、right、top和bottom屬性與margin屬性布局相對定位元素的情況
a.margin屬性和top、bottom、left、right屬性同時使用，如果同一方向偏移，它們的值會產生累加的效果，見圖11。
例如：margin-left:120px; left:-20px; 那麼box2的偏移值為120px-20px=100px;
層級關係為：
[p=22, null, left]b.絕對定位和相對定位的累加加效果不同，如果top、bottom、left、right屬性和margin屬性偏移的方向相反，top、bottom、left、right屬性值有效，反方向的margin屬性值無效，見圖12。
層級關係為：
相對定位的元素不會脫離文件流，占用文件流的空間，left; right; top和bottom屬性與margin屬性混合使用會產生累加效果。
絕對定位的元素脫離文件流，偏移不影響文件流中的其它元素，left; right; top和bottom屬性與margin屬性混合使用，偏移方向相同值累加，方向相反，margin屬性值無效。
絕對定位的元素以最近的定位祖先元素為參照物。
理解絕對定位和相對定位
概要 本文主要描述xhtml中相對定位和絕對定位各自的本質 用法 區別和兩者之間的關係。以及使用css的left right top bottom屬性 偏移屬性 和margin屬性 外邊距 對定位塊級元素進行布局的方法。本文的示例，請看這個附件demo。說明 佔位空間 元素在文件流中所佔據的空間。物...
CSS布局 2 絕對定位和相對定位
absolute css 中的寫法是 position absolute top right bottom left 下面簡稱trbl 進行定位，在沒有設定trbl，預設依據父級的做標原始點為原始點。如果設定trbl並 且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為...
絕對定位和相對定位
換了乙個新工作，一上來就是改前台web頁面之類的東西，工作這麼久以來web css之類的只是皮毛級應用，知之勝少，搞乙個css定位之類的東西還讓我費了好大一番勁，丟人啊。研究了以下，稍微總結一下吧。絕對定位和相對定位 這裡以div容器為例 1 相對定位 元素框偏移某個距離。元素仍保持其未定位前的形狀...