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