2、定位概念

上一節熟悉了盒模型， 現在來看一下視覺化格式模型和定位模型。 理解這兩個模型的細微差異是非常重要的， 因為它們一起控制著如何在頁面上佈置每個元素

2.1 視覺化格式模型

CSS有三種基本的定位機制：普通流、 浮動、絕對定位。 除非專門指定， 否則所有框都在普通流中定位。

在普通流中元素框的位置由元素在HTML中的位置決定。

p、h1或div等元素常被稱為塊級元素， 這意味著這些元素顯示為一塊內容， 即“塊框”。 與之相反， a和span等元素被稱為行內元素， 因為他們的內容顯示在行中， 即“行內框”。

可以使用display屬性改變生成的框的型別。 通過將display設定為block，可以讓行內元素表現得像塊級元素一樣。將display屬性設定為none， 讓生成的元素根本沒有框。 這樣，這個框及所有內容就不再顯示， 不佔用文件的空間

visibility:hidden 只是隱藏了元素的可見性，所佔用的文件空間並未消失， 這就是它與display:hidden的區別。

• 塊級框從上至下一個接一個地垂直排列， 框之間的垂直距離由框的垂直外邊距計算出來。

• 行內框在一行中水平排列。 可以使用水平內邊距、邊框和外邊距調整它們的水平間距。 但是垂直內邊距、邊框和外邊距不影響行內框的高度(行內框在文件中的位置)。 同樣， 在行內框上設定顯式的寬高也沒有影響。

  由一行形成的水平框稱為行框， 行框的高度總是足以容納它包含的所有行內框。 但是，設定行高可以增加這個框的高度。 因此， 修改行內框尺寸唯一方法是修改行高或者水平邊框，水平內邊距或水平外邊距

  。

我們來看下面幾個例子：

例1：

html

 <div></div><a href=""></a><a href=""></a><div></div>    

css

 body{
     padding:0;
     margin:0; 
     font-size:0;
 }

 a {
     background:#000;
     padding:5px 20px;
     border:3px solid #FF0;
     margin:10px;  
     font-size
 
:0; 
     height:10px;
     width:500px;

 }

 div {
     background:#ccc;
     height:20px;
     font-size:12px;
     margin:0;
     border:1px solid #ff0000;
 }

效果：

在上面這個例子中， 給行內元素a, 設定了寬高、內邊距、邊框、外邊距。 在這其中寬高並未起作用， 垂直方向上的內邊距、邊框、外邊距也並未改變元素的尺寸， 也就是說並未改變元素在文件中的位置， 高度仍然是0， 所以我們看到a元素上下的兩個div元素相鄰，並未被a元素隔開。

把上邊的例子稍微改一下， 給a設定設定行高, 看一下效果:

例2：

CSS

 body{
     padding:0;
     margin:0; 
     font-size:0;
 }

 a {
     background:#000;
     padding:5px 20px;
     border:3px solid #FF0;
     margin:10px;  
     font-size:0; 
     height:10px;
     width:500px;
     line-height:16px;

 }

 div {
     background:#ccc;
     height:20px;
     font-size:12px;
     margin:0;
     border:1px solid #ff0000;
 }

效果

元素高度被改變了！

現在回頭看第一個例子，可以發現body和a都設定了font-size:0， 試一下把body中的刪除只保留a元素，看一下效果：

例3：

CSS

 body{
     padding:0;
     margin:0; 
 }

 a {
     background:#000;
     padding:5px 20px;
     border:3px solid #FF0;
     margin:10px;  
     font-size:0px; 
     height:10px;
     width:500px;

 }

 div {
     background:#ccc;
     height:20px;
     font-size:12px;
     margin:0;
     border:1px solid #ff0000;
 }

效果

兩個div元素之間出現了垂直邊距？ 現在我們看一下上面說過的行框， 行內元素會被行框包圍， 雖然在這裡a元素設定了font-size:0; 但是包含它的行框仍然會有一個預設的font-size。

我們還可以嘗試修改line-height。
例4：

CSS

 body{
     padding:0;
     margin:0; 
     font-size:0;
     line-height:10px;
 }

 a {
     background:#000;
     padding:5px 20px;
     border:3px solid #FF0;
     margin:10px;   
     height:10px;
     width:500px;
     line-height:0;

 }

 div {
     background:#ccc;
     height:20px;
     font-size:12px;
     margin:0;
     border:1px solid #ff0000;
 }

效果

在上邊的例子中， 給body設定了行高， 即使a元素設定了行高為0， 但是包含它的行內框，仍然繼承了body這個屬性， 所以它有了高度， 上下div之間出現了間距。

各個瀏覽器之間 這些情況或許還會有不同， 總之普通文件流中行內元素的高度很難控制， 個人認為給它們設定display:inline-block是一個不錯的解決辦法

display:inline-block。 顧名思義， 這個宣告讓元素像行內元素一樣水平依次排列。 但是，框的內容仍然符合塊級框的行為， 例如能夠顯示地設定寬高、垂直外邊距、垂直內邊距。

2.2 相對定位(position:relative)

相對定位是一個容易掌握的概念。 如果對一個元素設定相對定位， 通過設定垂直或水平的位置， 這個元素會“相對於”它的起點（原位置）移動。 例如： 設定元素 top:20px； left:20px; 那麼框將出現在距原本元素頂部左側各20px的地方。

使用相對定位時，無論是否移動， 元素仍然佔據原先的空間， 因此移動元素會導致它覆蓋其他框， 相對定位仍然屬於普通流定位模型。 如下圖：

對藍框進行定位後，它仍佔據原先的位置。

2.3 絕對定位(position:absolute)

與相對定位相反， 絕對定位使元素與文件流無關， 因此不佔據空間。 普通文件流中其他的元素的佈局不受絕對定位元素的影響。參見下圖：

對藍框定位後， 它下面的元素上移佔據了藍框原本的位置， 彷彿藍框不存在一般。

絕對定位的元素位置是相對於距離它最近的那個已定位的祖先(相對/絕對)元素決定的。 如果元素沒有已定位的祖先元素， 那麼它的位置相對於初始包含塊。

絕對定位在大多數現代瀏覽器中實現得很好， 但是在IE5.5與IE6中有一個bug。 如果要設定絕對定位框的right或bottom, 那麼需要確保它的 最近的相對定位的祖先元素 已經設定了尺寸。 如果沒有， 那麼IE會錯誤的相對於初始包含快（畫布）定位這個框。 簡單的解決辦法 就是給相對定位的框設定尺寸。 或者儘量使用 top/left定位。

固定定位(position:fixed)

固定定位是絕對定位的一種。 差異在於固定元素的包含快是視口(viewport)。 這使得我們能夠建立總是出現在視窗固定位置的元素。

不過，IE6和更低版本不支援固定定位。 要解決這個問題可以使用javascript。

可以通過z-index屬性控制定位框（相對/絕對）的堆疊次序。 z-index的值越高， 框的位置就上面。