CSS中的定位

來源:互聯網
上載者:User

標籤:nbsp   文檔   tom   定位   產生   alt   htm   href   屬性   

層級關係為:

<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

 

CSS中的定位

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.