關(guān)于絕對(duì)定位排列的問題
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute樣式</title>
<style type="text/css">
#ab{
? ? position:absolute;
}
#abc{
position:absolute;
left:20px;
}
#abcd{
position:absolute;
left:100px;
}
</style>
</head>
<body>
<div id="ab">son</div>
<div id="abc">father</div>
<div id="abcd">grandfather</div>
</body>
</html>
為什么這三個(gè)<div>顯示在同一行上？
2016-04-07
我們先來看一下絕對(duì)定位的含義：
層模型--絕對(duì)定位
如果想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。
你設(shè)置這三個(gè)div沒有設(shè)定一個(gè)具有定位屬性的父元素，所以，他們就默認(rèn)的是body元素，即瀏覽器窗口。
你設(shè)置了如下的css樣式
#ab{
? ? position:absolute;
}
#abc{
position:absolute;
left:20px;
}
#abcd{
position:absolute;
left:100px;
}
那么顯示的結(jié)果就是三個(gè)元素都會(huì)在一行，原因很簡(jiǎn)單，絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。就是說abc這個(gè)div會(huì)向右移動(dòng)20px abcd會(huì)向右移動(dòng)100px,但是同時(shí)絕對(duì)定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，所以三個(gè)div還是會(huì)顯示在同一行。
2016-04-07
相對(duì)定位：設(shè)置為相對(duì)定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。
?.relative{?position: relative;? background:purple;??width:50px;??height: 50px;??left: 80px;?}?
這個(gè)框會(huì)出現(xiàn)在跟原來的位置向右80px的地方，原來的位置為空，
如果position: relative改成position: absolute,
則這個(gè)框的原來空間會(huì)被下面的框所覆蓋。
經(jīng)對(duì)定位：絕對(duì)定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。
.box{??width:300px;??height: 300px;??margin: 0 auto;??border: 1px solid orange;??position: relative;?}?
.relative{??position:absolute;??background:purple;??width:50px;??height: 50px;??left: 80px;}
box是relative的父元素，標(biāo)識(shí)為relative 的框會(huì)出現(xiàn)在向右 80px的地方，
但是如果父元素box沒有定位屬性，它則會(huì)相對(duì)body進(jìn)行定位，位置會(huì)大變，會(huì)脫離box框。