在設計網頁時，能夠控制好各個模塊在頁面中的位置是非常關鍵的。本章將講解利用Div+CSS對頁面元素進行定位的方法。

Div是HTML中指定的專門用於布局設計的容器對象

Div是CSS布局的核心對象。

Div本身與樣式沒有任何關系，樣式需要編寫CSS來實現，因此Div對象應該說從本質上實現了與樣式的分離。（最終樣式由CSS來完成）

無論是多麽復雜的布局方法，都可以使用Div之間的並列與嵌套來實現。

為了實現內容與表現的分離，不應當將align對齊屬性與style行間樣式表屬性編寫在Div標簽中，因此，Div代碼只可能有以下兩種形式：

　　　　　　<div id="id 名稱">內容</div>

　　　　　　<div class="class 名稱">內容</div>

CSS布局定位

　　　　CSS排版首先將頁面在整體上進行<Div>標記的分塊，然後對各個塊進行CSS定位，最後在各個塊中添加相應的內容。通過CSS排版的頁面，更新

　　十分容易，甚至是頁面的拓撲結構，都可以通過修改CSS屬性來重新定位。

　　1. 浮動定位

　　　　　　浮動定位是CSS排版中非常重要的手段。

　　　　　　浮動的框可以左右移動，直到其邊緣碰到包含框或另一個浮動框的邊緣。

　　　　　　　　　　屬性：float　　　　　　可用值：none / left / right

　　　　　　浮動定位會有一些特殊情況（包含框無法容納……）

　　2. position定位

　　　　　　position指定塊相對於其父塊的位置和相對於它自身應該在的位置。

　　　　　　　　　　屬性：position

　　　　　　　　　　可用值：

　　　　　　　　　　　　　　relative　　　　相對　　　　對象不可層疊（在正常文檔流中偏移位置）

　　　　　　　　　　　　　　absolute　　　 絕對　　　　其層疊通過 z-index 屬性來定義（將對象從文檔流中拖出）

　　　　　　　　　　　　　　fixed　　　　 懸浮　　　　使元素固定在屏幕的某個位置（不隨滾動條的滾動而滾動）

　　　　　　1. 相對定位：

　　　　　　　　　　無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致覆蓋其他框。

　　　　　　2.絕對定位：

　　　　　　　　　　絕對定位使元素的位置與文檔流無關，因此不占據空間。

　　　　　　　　　　簡單地說，使用了絕對定位之後，對象就浮在網頁的上面了。（z-index屬性的值越大，框在堆中的位置就越高）

　　　　　　3.懸浮定位：

　　　　　　　　　　本質上與將其設置為absolute一樣，只不過塊不隨著瀏覽器的滾動條向上或鄉下移動。

　　　　對於定位的主要問題是要記住每種定位的意義。相對定位是相對於元素在文檔流中的初始位置，而絕對定位是相對於最近的已定位的父元素（如果不存在

　　已定位的父元素，那就相對於最初的包含塊）

　　　　因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。

使用Div + CSS布局頁面