CSS定位與浮動詳解

易輝艷

在網頁布局中，div等塊級元素用于搭建網站結構，CSS層疊樣式表（Cascading Style Sheets）則用于對塊級元素進行像素級的精確定位及美化。CSS定位一直是WEB標準應用中的難點，只有理清了定位的原理，才會讓網頁更加完美。

一、CSS定位

在CSS布局中，元素定位用Position屬性完成。Position屬性有4個值，分別是：static、relative、absolute、fixed，其中static是默認值，代表無定位（用于取消特殊定位的繼承，恢復默認）。

1.相對定位

當元素的Position屬性值為relative時，這個元素即被相對定位了。相對定位后，該元素將出現在相應的位置上，我們可以通過設置垂直（top值）或水平（left值）位置，使這個元素“相對于”它原來的位置進行移動。對元素使用相對定位時，無論是否進行移動，該元素仍然保留其原來的空間，移動元素會覆蓋其他框，因此，在實際應用中如果相對定位的位移數值過大，那么原有的區域就會形成一塊空白。

2.絕對定位

當元素的Position屬性值為absolute時，這個元素即被絕對定位了。絕對定位在幾種定位中應用最廣泛，它能很精確地將元素移動到想要的位置。使用絕對定位的元素會浮于其他元素之上，它是獨立出來的。絕對定位的元素的位置相對于最近的已定位的祖先元素，如果沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（瀏覽器或其他HTML元素）。在默認情況下，絕對定位的框緊挨著其祖先元素的左邊和頂邊。在CSS中設置絕對定位元素的top（頂部）、bottom（底部）、left（左邊）和right（右邊）的值，可以使絕對定位的框從它的包含塊向上、下、左、右移動，這樣可以直接將元素定位在頁面上的任何位置。絕對定位使元素的位置與文檔流無關，因此不占據空間，對比相對定位，絕對定位的元素不會在原有區域形成空白。絕對定位的框會覆蓋頁面上的其他元素形成堆放，我們通過設置z-index屬性來控制這些框的堆放次序。z-index值越大，框在堆中的位置就越高。

重要的是，為更方便地進行網頁布局，我們希望絕對定位的坐標原點可以固定在網頁中的某一個隨網頁移動的點，當網頁是居中形式的時候這種效果就會顯得特別的重要。實現這種效果的基本方法就是對絕對定位元素的祖先元素使用相對定位，那么絕對定位元素的坐標就會以相對定位的祖先元素為坐標起始點，而祖先元素如果要產生位置移動，或是瀏覽器窗口大小有所變動都不會影響到這個絕對定位元素與相對定位的祖先元素之間的位置關系。需要注意的是，為避免絕對定位引起的重疊，應固定絕對定位元素的尺寸。

3.固定定位

當元素的Position屬性值為fixed時，這個元素即被絕對定位了。固定定位和絕對定位很相似，不過固定定位的元素不是隨滾動條的拖動變化位置，而是固定在瀏覽器的視框位置。不幸的是，IE 6和更低版本不支持固定定位。

二、CSS浮動

浮動是一種定位方式，它是CSS網頁布局中非常重要的屬性。對塊狀元素應用浮動（float）屬性來進行布局，不但可以對整個頁面版式進行規劃，也可以對一些基本元素如導航等進行排列。

使用div布局網頁，通常結果是一個框占據一行。怎樣才能實現布局中多個并列的區域呢？通過浮動（float）屬性，可以使多個塊狀區域并列一行。Float有4個屬性值：Left和Right分別浮動元素到各自的方向，None（默認值）使元素不浮動，Inherit將會從祖先元素獲取float值。對前面的塊狀元素設置浮動屬性（Left或Right）使之成為浮動元素后，有足夠的空間（即包含塊夠大時）時，后面的塊狀元素會自動浮上來，和它并列一行。例如，將三個塊狀元素都設置為向左浮動，在有足夠空間的情況下，它們并列成一行。通過浮動屬性設置,可以將多個塊狀的li列表元素并列，這種布局結構被廣泛應用于網頁的導航條制作。

在使用浮動屬性布局時，如果包含塊無法容納水平排列的多個浮動元素，那么其他浮動塊就會向下移動，直到有足夠空間的地方。如果浮動元素的高度不同，那么當它們向下移動時可能會被其他浮動元素“卡住”。

清除（clear）是浮動（float）的相關屬性。Clear屬性的值為none、left、right和both，默認值為none。當多個塊狀元素由于第1個元素設置了浮動屬性并列時，如果某個元素不需要被“流”上去，即可設置相應的clear屬性。

參考文獻：

［1］陳益材等.Dreamweaver cs4+asp動態網站建設從入門到精通［M］.北京：機械工業出版社，2011：67-72.

［2］Andy Budd等.精通CSS：高級Web標準解決方案［M］.陳劍甌譯.北京：人民郵電出版社，2010：43-50.