CSS定位與浮動詳解

易輝艷

在網(wǎng)頁布局中，div等塊級元素用于搭建網(wǎng)站結(jié)構(gòu)，CSS層疊樣式表（Cascading Style Sheets）則用于對塊級元素進行像素級的精確定位及美化。CSS定位一直是WEB標(biāo)準(zhǔn)應(yīng)用中的難點，只有理清了定位的原理，才會讓網(wǎng)頁更加完美。

一、CSS定位

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

1.相對定位

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

2.絕對定位

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

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

3.固定定位

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

二、CSS浮動

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

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

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

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

參考文獻：

［1］陳益材等.Dreamweaver cs4+asp動態(tài)網(wǎng)站建設(shè)從入門到精通［M］.北京：機械工業(yè)出版社，2011：67-72.

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