關(guān)于絕對定位排列的問題
<!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
我們先來看一下絕對定位的含義：
層模型--絕對定位
如果想為元素設(shè)置層模型中的絕對定位，需要設(shè)置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
你設(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è)元素都會在一行，原因很簡單，絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。就是說abc這個(gè)div會向右移動20px abcd會向右移動100px,但是同時(shí)絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，所以三個(gè)div還是會顯示在同一行。
2016-04-07
相對定位：設(shè)置為相對定位的元素框會偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。
?.relative{?position: relative;? background:purple;??width:50px;??height: 50px;??left: 80px;?}?
這個(gè)框會出現(xiàn)在跟原來的位置向右80px的地方，原來的位置為空，
如果position: relative改成position: absolute,
則這個(gè)框的原來空間會被下面的框所覆蓋。
經(jīng)對定位：絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對定位不同，相對定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬τ谒谄胀髦械奈恢谩?/p>
.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)識為relative 的框會出現(xiàn)在向右 80px的地方，
但是如果父元素box沒有定位屬性，它則會相對body進(jìn)行定位，位置會大變，會脫離box框。