層級關系為:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是參照物<div—————————-沒有設置為定位元素,不是參照物<div———————- position:relative 參照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果圖:
為改變參照物(橘色框)后的效果層級關系為:<div ——————————— position:relative;最近的祖先定位元素,參照物<div—————————-沒有設置為定位元素,不是參照物<div———————-沒有設置為定位元素,不是參照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果圖:
參照物為最頂級的元素情況。層級關系為:<div ———————————沒有設置為定位元素,不是參照物<div—————————-沒有設置為定位元素,不是參照物<div———————-沒有設置為定位元素,不是參照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果圖:
僅使用margin屬性布局絕對定位元素的情況此情況,margin-bottom 和margin-right的值不再對文檔流中的元素產生影響,因為該元素已經脫離了文檔流。另外,不管它的祖先元素有沒有定位,都是以文檔流中原來所在的位置上偏移參照物。 圖9中,使用margin屬性布局相對定位元素。層級關系為:<div ——————————— position:relative; 不是參照物<div—————————-沒有設置為定位元素,不是參照物<div———————-沒有設置為定位元素,不是參照物<div box1<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;<div box3效果圖:
IE6的情況下,box2前面沒有兄弟節點,則margin-left的值會出現雙倍邊距,見圖10。層級關系為:<div ——————————— position:relative; 不是參照物<div—————————-沒有設置為定位元素,不是參照物<div———————-沒有設置為定位元素,不是參照物<div box1<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;<div box3效果圖:
新聞熱點
疑難解答