首頁  >  文章  >  web前端  >  CSS中的絕對定位與相對定位詳細介紹

CSS中的絕對定位與相對定位詳細介紹

高洛峰
高洛峰原創
2017-03-27 09:13:172033瀏覽

層級關係為:

效果圖:

CSS中的絕對定位與相對定位詳細介紹

##為改變參照物(橘色框)後的效果

層級關係為:

效果圖:

CSS中的絕對定位與相對定位詳細介紹

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

層級關係為:

效果圖:

CSS中的絕對定位與相對定位詳細介紹##僅使用margin屬性佈局絕對定位元素的情況

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

圖9中,使用margin屬性佈局相對定位元素。
層級關係為:

效果圖:

CSS中的絕對定位與相對定位詳細介紹IE6的情況下,box2前面沒有兄弟節點,則margin-left的值會出現雙倍邊距,見圖10。

層級關係為:

效果圖:

以上是CSS中的絕對定位與相對定位詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn