CSS中的絕對定位與相對定位

層級關系為：

<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物

<div—————————-沒有設定為定位元素，不是參照物

<div———————- position:relative 參照物

<div box1

<div box2 ——–position:absolute; top:50px; left:120px;

<div box3

效果圖：

為改變參照物（橘色框）後的效果

<div ——————————— position:relative;最近的祖先定位元素，參照物

<div———————-沒有設定為定位元素，不是參照物

參照物為最頂級的元素情況。

<div ———————————沒有設定為定位元素，不是參照物

僅使用margin屬性布局絕對定位元素的情況

此情況，margin-bottom 和margin-right的值不再對文檔流中的元素産生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。 

圖9中，使用margin屬性布局相對定位元素。

<div ——————————— position:relative; 不是參照物

<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;

IE6的情況下，box2前面沒有兄弟節點，則margin-left的值會出現雙倍邊距，見圖10。

<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;

本文轉自 風雨蕭條 51CTO部落格，原文連結：http://blog.51cto.com/1095221645/1744958，如需轉載請自行聯系原作者