CSS佈局在整個前端開發中佔據了大約50-70%的工作量，在遵循web規範的前提下，編寫合乎規範的前端程式碼，實現結構、樣式和行為的分離，對於後期程式碼的維護以及不同的開發人員之間的協作具有重要的意義。

在編寫html的過程中,強調使用帶有明確語義的標籤，Html中標籤除了div和span之外都是有明確的語義的，這樣一方面可以增強程式碼的可讀性，另一方面可加快瀏覽器的解析速度。

HTML中的每一個標籤，根據其其自身的屬性可以區分為行級元素還是塊級元素，一般情況下，應該儘可能使用標籤預設的位置進行佈局，當預設位置不能滿足展示需求的時候，再考慮採用css程式碼來進一步控制標籤元素的位置。 CSS定位的基礎是基於盒子模型，介紹如下：

CSS的盒子模型

任何頁面元素都可以看成一個盒子
一個盒子模型由content、padding、border、margin四部分組成。
width(height)的值指content的width(height)+padding的值。
border：border-top、border-bottom、border-left、border-right
width: thin、medium、thick、數值
style: none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
padding：padding-top、padding-bottom、padding-left、padding-right
margin：margin-top、margin-bottom、margin-left、margin-right
對一行而言，兩個塊的margin = margin-right + margin-left
對換行而言，兩個塊的margin = margin-bottom和margin-top中較大者
對父子而言，子塊的margin = 子塊的margin + 父塊的padding
當margin設為負數時，塊會向相反的方向移動，甚至覆蓋另外的塊

定位含義

定位的目的是在框元素的padding、margin等自身屬性無法滿足需求時，改變元素在html文件中的預設位置，定位到目標區域時使用。如果要使用 top,bottom,left,right 屬性，就必須要使用relative和absolute定位屬性。

在CSS中關於定位的型別有如下幾種：
position:relative | absolute | static | fixed
static(靜態：沒有特別的設定，遵循基本的定位規定，保持原來的位置不變，不能通過z-index進行層次分級。

relative(相對定位)：物件不脫離文件流，物件不可層疊、參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。也就是說盡管物件偏離了原來應該所在的位置，但是原來的位置還是佔據中，不然其他元素用。

absolute(絕對定位)：脫離文件流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設定的父級物件進行絕對定位，如果物件的父級沒有設定定位屬性，absolute元素將以body座標原點進行定位，可以通過z-index進行層次分級。本來應該在的位置被讓出來的，其他的元素填充那個位置。

fixed（固定定位）：這裡所固定的參照對像是可視視窗而並非是body或是父級元素。可通過z-index進行層次分級。
注：

CSS中定位的層疊分級：z-index: auto | namber;

auto 遵從其父物件的定位
namber 無單位的整數值。可為負數

相對定位

相對定位是相對於該元素本來在文件中應該出現的位置。

設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

絕對定位

決定定位是相對於其父元素而言。

設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

普通流中其它元素的佈局就像絕對定位的元素不存在一樣：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性來控制這些框的堆放次序。

一個例子

如果要是要使父元素包含子元素的話，應該使父元素的寬和高包含子元素的。
Div1為絕對定位：其脫離為文件流。不佔據文件流的位置，position: absolute;left: 150px;top:20px;
Div2為相對定位：注意是相對其應該出現的位置，position:relative ;top:20px;left:150px;
Div21為相對定位：圖所示，可以理解。

#div0{
 border: 2px solid #FE7633; height:220px; width:380px;  
}

#div1{
 border: 2px solid #C2DCFF;
 height: 80px;
 width: 150px;
 position: absolute;
 left: 150px;
 top:20px;
}

#div2{position:relative ;top:20px;left:150px; border:2px solid #646464; height:120px; width:150px}

#div21{border:2px solid #A5D69C; height:120px; width:50px}

#div3{ border:2px solid #A5D69C; height:20px; width:250px;}