CSS在默認的條件下，是按照正常文檔流的排列，即爲塊元素佔一行，內聯元素依次排列；使用浮動佈局（float）可以使佈局變得非常靈活，但是不容易掌控，定位佈局則可以隨心所欲的排列。
佈局方式
固定定位：fixed
說明：相對於瀏覽器的排列，四邊的距離都是相對於瀏覽器而言，無論是否拖動滾條，所處的位置始終不改變。相對定位：relative
說明：相對於改元素當前的位置。絕對定位：absolute
說明：若是父容器沒有特殊佈局，那麼同固定定位；若是父容器已設置爲相對定位，那麼邊距就是到達父容器邊界的距離。靜態定位：static
語法：
position：佈局方式（例：fixed）
top：
right：
bottom：
left：
實例
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
* {margin:0;}/*外邊距清零*/
#p_1 {
position:fixed;
left:200px;
background-color:red;
}
#p_2 {
position:absolute;/*段落2父元素無特殊佈局*/
top:50px;
left:60px;
background-color:green;
}
div {
position:relative;/*段落3父元素相對定位*/
width:300px;
height:300px;
background-color:gray;
margin:0 auto;/*水平居中*/
}
#p_3 {
position:absolute;
top:50px;
left:60px;
background-color:blue;
}
#p_4 {
background-color:yellow;
}
#p_5 {
position:relative;/*按照正常文檔流，段落5應當緊隨段落4的下方，但在此處設置了相對佈局*/
background-color:black;
top:90px;
left:60px;
color:white;
}
</style>
</head>
<body>
<p id="p_1">段落1</p>
<p id="p_2">段落2</p>
<div>
<p id="p_3">段落3</p>
</div>
<p id="p_4">段落4</p>
<p id="p_5">段落5</p>
</body>
</html>
