CSS佈局模型——層模型
1.層模型--絕對定位：設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來，然後使用left、 right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這 樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
2.層模型--相對定位：設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流 中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動 了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移 前的位置保留不動。
程式碼實現相對於以前位置向下移動50px，向右移動100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
3.層模型--固定定位：fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁窗 口）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
Relative與Absolute組合使用：
1、參照定位的元素必須是相對定位元素的前輩元素；
2、參照定位的元素必須加入position:relative；
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。