在多說一句，如果行內元素也設定float，它就自動等於是個塊元素了，等於同時設定了display
下面介紹絕對位置
設定為絕對位置的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。
絕對位置使元素的位置與文檔流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
概念的說法先拋在一邊，簡單的說
絕對位置就是不在需要margin ，float來進行定位，而是根據座標進行定位
座標起始點在哪，是瀏覽器的左上方的點
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;margin-left:50px;} #b{width:100px;height:100px;border:soild;background:green;position: absolute;left:30px;top: 20px; } </style> <head><body><div id="a"><div id="b"></div> </div></body></html>
可以看出綠色並不根據他的父div來定位，而是瀏覽器框左上方的位置
但如果父div也定義了絕對位置或相對定位，會怎樣呢？
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;margin-left:50px;position: absolute;} #b{width:100px;height:100px;border:soild;background:green;position: absolute;left:30px;top: 20px; } </style> <head><body><div id="a"><div id="b"></div> </div></body></html>
那他會根據父div的左上方來定位（父層定義position: relative;同樣有效）
也就是說，如果一個定義了絕對位置的層被一個非絕對或相對定位的層包含著，是沒任何意義的，它等於是一個完全獨立的div，不受非絕對或相對定位的層約束
其實絕對位置比margin定位爽多了，margin定位需要拿周邊的div做參照物，而絕對位置只需要根據左上方調整座標即可
絕對位置是脫離了文字資料流的，它可以去任何地區，即便那地區已經有div佔著了
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;margin-left:50px;position: relative; } #b{width:100px;height:100px;border:soild;background:green;position: absolute;left:30px;top: 20px; } #c{width:100px;height:100px;border:soild;background:red; } </style> <head><body><div id="a"><div id="c"></div><div id="b"></div> </div></body></html>
可以看到它覆蓋了普通div，無視了普通div的存在
那麼是不是也會覆蓋浮動div呢？
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;margin-left:50px;position: relative; } #b{width:100px;height:100px;border:soild;background:green;position: absolute;left:30px;top: 20px; } #c{width:200px;height:200px;border:soild;background:red;float:left;margin:10px;} #d{width:100px;height:100px;border:soild;background:blue; } </style> <head><body><div id="a"><div id="c"></div><div id="d"></div><div id="b"></div> </div></body></html>
藍色是普通div，紅色是浮動div ，綠色是絕對位置div
可以看出，絕對位置div是在最高層，能覆蓋所有
也就是說普通div在地上遵循地上的流模式
浮動div遵循空中的流模式，一個是地上的飛機，一個是在空中的飛機
那麼絕對位置div等於是飛艇了，比飛機飛的要高，而且可以自由移動
現在看看兩個絕對位置div遇到一起會怎樣
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;margin-left:50px;position: relative; } #b{width:100px;height:100px;border:soild;background:green;position: absolute;left:30px;top: 20px; } #c{width:100px;height:100px;border:soild;background:red;position: absolute;left:60px;top: 20px;} </style> <head><body><div id="a"><div id="c"></div><div id="b"></div> </div></body></html>
可以看到，綠色覆蓋的紅色，這說明兩個絕對div是不會有流模式的，所以使用margin無效
他們互相都當互相不存在，才不會管哪塊地區被佔用
那為什麼是綠色覆蓋了紅色，不是紅色覆蓋綠色？
因為這裡
<div id="c"></div>
<div id="b"></div>
因為紅色div在前面，綠色在後，網頁是按從上到下，從左至右解析的，所以解析到紅色div先出現，綠色就會覆蓋
總而言之，越往後的絕對位置div，等於是它飛的越高，可以覆蓋掉前面的絕對位置div
你把這兩個掉個頭，你會發現是紅色覆蓋了綠色
還有一種辦法，就是用z-index屬性，z-index等級越高就飛的越高，不設定就預設為0
<html><head><style type="text/css"> body{margin:0;padding:0;} #a{width:500px;height:500px;border:solid;margin-left:50px;position: relative; } #b{width:100px;height:100px;border:soild;background:green;position: absolute;left:30px;top: 20px; } #c{width:100px;height:100px;border:soild;background:red;position: absolute;left:60px;top: 20px;z-index:1;} </style> <head><body><div id="a"><div id="c"></div><div id="b"></div> </div></body></html>
這樣可以不用考慮絕對位置div的出現順序就讓他們誰在誰上面
以上就是div+css網頁布局設計新開端（9）的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
