一、元素定位機制
1.普通文檔流
普通文檔流將瀏覽器窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。
2.定位思想和浮動
CSS元素定位的基本思想很簡單，它允許我們定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。此外，CSS中的浮動允許元素向左或者向右移動。通常情況下，我們使用div+css布局頁面，而css布局中最重要的就是float屬性。
3.一切皆為框
div、h1 或 p 元素常常被稱為塊級元素。這意味着這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。可以使用 display 屬性改變生成的框的類型。通過將 display 屬性設置為 block，可以讓行內元素（比如 <a> 元素）表現得像塊級元素一樣。還可以通過把 display 設置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。
但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：
View Code
<div> /*文本生是無名框*/ some text /*p為塊框*/ <p>Some more text.</p> </div>
在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。
塊級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助於理解在屏幕上看到的所有東西都形成某種框。
4.CSS定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
二、元素定位
在CSS中，用position屬性來定位元素。position屬性有4個取值，從而實現 4 種不同類型的定位，這會影響元素框生成的方式。
1.static
position屬性的默認值，表示CSS文檔流定位，元素框正常生成。就是按照正常的布局流從上到下從左到右布局，塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。平常我們設計網頁時，沒有指定 position，也就表示使用 static。
以下是position="static"的一個例子：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>文檔流布局</title> 5 <style type="text/css"> 6 #div1 7 { 8 width: 200px; 9 height: 100px; 10 background-color: blue; 11 /*顯式聲明文檔流布局*/ 12 position: static; 13 } 14 #div2 15 { 16 width: 200px; 17 height: 100px; 18 background-color: red; 19 /*這里將顯式定位注釋掉了，但效果與static一樣，因為默認文檔流布局*/ 20 /*position: static;*/ 21 } 22 </style> 23 </head> 24 <body> 25 <div id="div1"> 26 </div> 27 <div id="div2"> 28 </div> 29 </body> 30 </html>
2.relative
relative屬性表示CSS相對定位，設置為相對定位的元素框會偏移原來的位置某個距離。通過top、right、bottom和left屬性來設置元素位置的偏移量。但是元素仍然保持其未定位前的形狀，而且它原本所占的空間仍保留。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。比如，將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方；將left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。
注意：相對定位實際上被看作普通流定位模型（static）的一部分，因為元素的位置相對於它在普通流中的位置。
/*相對定位*/ #box_relative { position: relative; left: 30px; top: 20px; }
下圖是對上面CSS相對定位代碼的說明：
以下是一個相對定位的例子：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS相對定位</title> 5 <style type="text/css"> 6 #div1 7 { 8 width: 200px; 9 height: 100px; 10 background-color: blue; 11 } 12 #div2 13 { 14 width: 200px; 15 height: 100px; 16 background-color: red; 17 } 18 #divRelative 19 { 20 width: 200px; 21 height: 100px; 22 background-color: yellow; 23 /*CSS相對定位，該元素會距它在文檔流中的位置向右偏移100px,向下偏移50px*/ 24 position: relative; 25 top: 50px; 26 left: 100px; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="div1"> 32 </div> 33 34 <div id="divRelative"> 35 </div> 36 <div id="div2"> 37 </div> 38 </body> 39 </html>
3.absolute
absolute屬性設置CSS絕對定位，設置為絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊（即相對於position屬性非static值的最近父級元素進行偏移），如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊。。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。普通流中其它元素的布局就像絕對定位的元素不存在一樣：
/*絕對定位*/ #box_absolute{ position: absolute; left: 30px; top: 20px; }
下圖是對上面CSS絕對定位代碼的說明：
下面是一個絕對定位的例子：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS絕對定位</title> 5 <style type="text/css"> 6 .divAbsolute 7 { 8 width: 200px; 9 height: 100px; 10 left: 50px; 11 top: 100px; 12 background-color: blue; 13 position: absolute; /*絕對定位,相對於瀏覽器window窗口偏移*/ 14 } 15 #divAbsolutesub 16 { 17 width: 100px; 18 height: 50px; 19 left: 20px; 20 top: 20px; 21 background-color: yellow; 22 position: absolute; /*絕對定位，相對於class="divAbsolute"偏移*/ 23 } 24 </style> 25 </head> 26 <body> 27 <div class="divAbsolute"> 28 <div id="divAbsolutesub"> 29 </div> 30 </div> 31 </body> 32 </html>
4.fixed
fixed屬性表示CSS固定定位，它的模式與 absolute 相同，不過無論怎么拖動滾動條，它始終固定在屏幕的指定位置。在 IE6 中不支持這個屬性；在 IE7 中支持這個屬性但需要指明 DOCTYPE；Firefox 等瀏覽器支持這個屬性。fixed定位的top、right、bottom、left 屬性指相對於視口的。
下面是一個fixed定位的例子，模仿了一些網站右下角的廣告信息：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS fixed定位</title> 5 <style type="text/css"> 6 #divFixed 7 { 8 width: 300px; 9 height: 200px; 10 font-size: 16px; 11 color: White; 12 font-weight: bold; 13 background: red; 14 position: fixed; /* top: 0px; 15 left: 0px; 16 */ 17 right: 0; 18 bottom: 0; 19 } 20 /*設置內容高度使頁面出現滾動條*/ 21 #content 22 { 23 height: 2000px; 24 background-color:Green; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="content"> 30 </div> 31 <div id="divFixed"> 32 你好，恭喜你獲得騰訊QQVIP會員大禮包，趕快領取吧！ 33 </div> 34 </body> 35 </html>
5.z-index
除了上述四個position取值，還有一個比較重要的屬性—z-index。z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。通過top額lef屬性定位元素的x軸和y軸，z-index屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。
注意：元素可擁有負的 z-index 屬性值；Z-index 僅能在絕對定位元素上奏效（position:absolute;）。
下面是一個z-index屬性應用的示例：
View Code
1 <html> 2 <head> 3 <style type="text/css"> 4 img.x 5 { 6 position:absolute; 7 left:0px; 8 top:0px; 9 z-index:-1 10 } 11 </style> 12 </head> 13 14 <body> 15 <h1>這是一個標題</h1> 16 <img class="x" src="/i/eg_mouse.jpg" /> 17 <p>默認的 z-index 是 0。Z-index -1 擁有更低的優先級。</p> 18 </body> 19 20 </html>
參考：http://www.w3school.com.cn/css/css_positioning.asp