二、用絕對定位布局塊級元素
設置position值:position:absolute;
此屬性值的設置,元素從文檔流完全刪除。
1.僅使用left、right、top和bottom屬性布局絕對定位元素的情況
絕對定位的元素的偏移位置以最近的定位(包括相對定位和絕對定位)祖先元素作參照物。如果元素沒有已定位(包括相對定位和絕對定位)的祖先元素,那么它的參照物為最頂級元素(由于瀏覽器的默認參照物不同,物可能是BODY或 HTML 元素)。
注意:IE下參照物需設置寬度或高度bottom和right屬性才可以正確的定位。
設置元素為絕對定位元素后,元素的Left、 Right、Top和Bottom屬性默認值不是0,只是將元素脫離文檔流。以下例子說明這個問題。
在圖5中,將橘黃色的祖先元素設置為定位元素(即參照物),box2設為絕對定位,文檔流由box1-box2-box3變為box1-box3,可box2卻沒有移動到距離參照物0值的位置上,可見box2的Left、 Right、Top和Bottom屬性默認值不等于0,它只是脫離了文檔流而已。
層級關系為:
<div ———————————position:relative 參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————-沒有設置為定位元素,不是參照物
????? <div box1
????? <div box2 ——–absolute
????? <div box3
效果圖:
圖5
以最近的祖先定位元素為參照物的情況
圖6中,Box2設置成絕對定位元素,脫離了文檔流,文檔流由box1-box2-box3變為box1-box3,box2以最近的定位祖先(藍色框)為參照物。
層級關系為:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————- position:relative 參照物
????? <div box1
????? <div box2 ——–position:absolute; top:50px; left:120px;
????? <div box3
效果圖:
圖6
圖7中,為改變參照物(橘色框)后的效果
層級關系為:
<div ——————————— position:relative;最近的祖先定位元素,參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————-沒有設置為定位元素,不是參照物
????? <div box1
????? <div box2 ——–position:absolute; top:50px; left:120px;
????? <div box3
效果圖:
圖7
圖8中,參照物為最頂級的元素情況。
層級關系為:
<div ———————————沒有設置為定位元素,不是參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————-沒有設置為定位元素,不是參照物
????? <div box1
????? <div box2 ——–position:absolute; top:50px; left:120px;
????? <div box3
效果圖:
圖8
2.僅使用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
效果圖:
圖9
IE6的情況下,box2前面沒有兄弟節點,則margin-left的值會出現雙倍邊距,見圖10。
層級關系為:
<div ——————————— position:relative; 不是參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————-沒有設置為定位元素,不是參照物
????? <div box1
????? <div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
????? <div box3
效果圖:
圖10
3.混合使用left、right、top和bottom屬性與margin屬性布局相對定位元素的情況
a.margin屬性和top、bottom、left、right屬性同時使用,如果同一方向偏移,它們的值會產生累加的效果,見圖11。
例如:margin-left:120px; left:-20px; 那么box2的偏移值為120px-20px=100px;
層級關系為:
<div ———————————-不是參照物
? <div—————————–不是參照物
??? <div———————–position:relative; 參照物
????? <div box1
????? <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
????? <div box3
效果圖:
圖11
b.絕對定位和相對定位的累加加效果不同,如果top、bottom、left、right屬性和margin屬性偏移的方向相反,top、bottom、left、right屬性值有效,反方向的margin屬性值無效,見圖12。
層級關系為:
<div ———————————-不是參照物
? <div—————————–不是參照物
??? <div———————–position:relative; 參照物
????? <div box1
????? <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
????? <div box3
效果圖:
圖12
總結:
相對定位的元素不會脫離文檔流,占用文檔流的空間,Left; Right; Top和Bottom屬性與margin屬性混合使用會產生累加效果。
絕對定位的元素脫離文檔流,偏移不影響文檔流中的其它元素,Left; Right; Top和Bottom屬性與margin屬性混合使用,偏移方向相同值累加,方向相反,margin屬性值無效。
絕對定位的元素以最近的定位祖先元素為參照物。
設置position值:position:absolute;
此屬性值的設置,元素從文檔流完全刪除。
1.僅使用left、right、top和bottom屬性布局絕對定位元素的情況
絕對定位的元素的偏移位置以最近的定位(包括相對定位和絕對定位)祖先元素作參照物。如果元素沒有已定位(包括相對定位和絕對定位)的祖先元素,那么它的參照物為最頂級元素(由于瀏覽器的默認參照物不同,物可能是BODY或 HTML 元素)。
注意:IE下參照物需設置寬度或高度bottom和right屬性才可以正確的定位。
設置元素為絕對定位元素后,元素的Left、 Right、Top和Bottom屬性默認值不是0,只是將元素脫離文檔流。以下例子說明這個問題。
在圖5中,將橘黃色的祖先元素設置為定位元素(即參照物),box2設為絕對定位,文檔流由box1-box2-box3變為box1-box3,可box2卻沒有移動到距離參照物0值的位置上,可見box2的Left、 Right、Top和Bottom屬性默認值不等于0,它只是脫離了文檔流而已。
層級關系為:
<div ———————————position:relative 參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————-沒有設置為定位元素,不是參照物
????? <div box1
????? <div box2 ——–absolute
????? <div box3
效果圖:

圖5
以最近的祖先定位元素為參照物的情況
圖6中,Box2設置成絕對定位元素,脫離了文檔流,文檔流由box1-box2-box3變為box1-box3,box2以最近的定位祖先(藍色框)為參照物。
層級關系為:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————- position:relative 參照物
????? <div box1
????? <div box2 ——–position:absolute; top:50px; left:120px;
????? <div box3
效果圖:

圖6
圖7中,為改變參照物(橘色框)后的效果
層級關系為:
<div ——————————— position:relative;最近的祖先定位元素,參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————-沒有設置為定位元素,不是參照物
????? <div box1
????? <div box2 ——–position:absolute; top:50px; left:120px;
????? <div box3
效果圖:

圖7
圖8中,參照物為最頂級的元素情況。
層級關系為:
<div ———————————沒有設置為定位元素,不是參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————-沒有設置為定位元素,不是參照物
????? <div box1
????? <div box2 ——–position:absolute; top:50px; left:120px;
????? <div box3
效果圖:

圖8
2.僅使用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
效果圖:

圖9
IE6的情況下,box2前面沒有兄弟節點,則margin-left的值會出現雙倍邊距,見圖10。
層級關系為:
<div ——————————— position:relative; 不是參照物
? <div—————————-沒有設置為定位元素,不是參照物
??? <div———————-沒有設置為定位元素,不是參照物
????? <div box1
????? <div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
????? <div box3
效果圖:

圖10
3.混合使用left、right、top和bottom屬性與margin屬性布局相對定位元素的情況
a.margin屬性和top、bottom、left、right屬性同時使用,如果同一方向偏移,它們的值會產生累加的效果,見圖11。
例如:margin-left:120px; left:-20px; 那么box2的偏移值為120px-20px=100px;
層級關系為:
<div ———————————-不是參照物
? <div—————————–不是參照物
??? <div———————–position:relative; 參照物
????? <div box1
????? <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
????? <div box3
效果圖:

圖11
b.絕對定位和相對定位的累加加效果不同,如果top、bottom、left、right屬性和margin屬性偏移的方向相反,top、bottom、left、right屬性值有效,反方向的margin屬性值無效,見圖12。
層級關系為:
<div ———————————-不是參照物
? <div—————————–不是參照物
??? <div———————–position:relative; 參照物
????? <div box1
????? <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
????? <div box3
效果圖:

圖12
總結:
相對定位的元素不會脫離文檔流,占用文檔流的空間,Left; Right; Top和Bottom屬性與margin屬性混合使用會產生累加效果。
絕對定位的元素脫離文檔流,偏移不影響文檔流中的其它元素,Left; Right; Top和Bottom屬性與margin屬性混合使用,偏移方向相同值累加,方向相反,margin屬性值無效。
絕對定位的元素以最近的定位祖先元素為參照物。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
