下面小編就為大家帶來一篇對絕對定位的全面理解。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧
有关绝对定位的理解
/* 1.未被設定定位之前是大盒子包裹著小盒子,符合標準文檔流,如圖片1所示
.box1{ width: 500px; height: 500px; background:red; } .box2{ width: 200px; height: 200px; background:blue; }*/
圖片1
#/*2. 絕對定位使元素的位置與文檔流程無關,因此不佔據空間。
這一點與相對定位不同,相對定位實際上被視為普通流定位模型的一部分,
因為元素的位置相對於它在普通流中的位置。絕對定位的元素的位置相對於最近的已定位祖先元素,
如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。
如圖2所示
.box1{width: 500px;height: 500px;background:red;position: relative;}.box2{width: 200px;height: 200px;background:blue;position:absolute;top:150px;left:150px; }*/
圖片2
/*3、box2沒有寬高且在不設定定位的情況下,box2會被box1包裹,符合標準文檔流,並且在佔據文檔的位置,
如圖片3.
.box1{ width: 500px; height: 500px; background:red; } .box2{ background:blue; }*/
/*4、box2沒有寬高在設定定位的情況下,box2會脫離文檔流,並且位置在指定相對於相對定位元素的位置,寬會失效,就是說寬高都由內容自動撐開的.如圖片4.如需要寬高需另設定*/
.box1{ width: 500px; height: 500px; background:red; position: relative; } .box2{ background:blue; position:absolute; top:150px; left:150px; }
这是一个小盒子