易輝艷

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

一、CSS定位

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

1.相對定位

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

2.絕對定位

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

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

3.固定定位

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

二、CSS浮動(dòng)

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

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

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

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

參考文獻(xiàn)：

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

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