Position 屬性在CSS網(wǎng)頁布局中的應(yīng)用技巧

梁靜琳

(武漢工程職業(yè)技術(shù)學(xué)院 湖北 武漢：430080)

Position 屬性在CSS網(wǎng)頁布局中的應(yīng)用技巧

梁靜琳

(武漢工程職業(yè)技術(shù)學(xué)院 湖北 武漢：430080)

介紹了position屬性在網(wǎng)頁設(shè)計中的作用及其基本設(shè)置方法，并利用position屬性制作CSS下拉菜單，體現(xiàn)了position屬性定位功能的靈活性。

position；CSS網(wǎng)頁布局

在CSS網(wǎng)頁設(shè)計中，與布局相關(guān)的屬性設(shè)置的使用技巧體現(xiàn)了設(shè)計者的設(shè)計水平?；镜膶傩灾饕衜argin、padding、float等，這些屬性在網(wǎng)頁設(shè)計教學(xué)中也是重點內(nèi)容，而在網(wǎng)頁布局中還會經(jīng)常使用position屬性對元素進(jìn)行定位。position一般做為網(wǎng)頁設(shè)計的高級應(yīng)用屬性，在教學(xué)中通常不會作為學(xué)習(xí)者的重點學(xué)習(xí)內(nèi)容，從而學(xué)習(xí)者很少去深入了解position的使用技巧。事實上，position屬性更能體現(xiàn)元素定位的靈活性，在網(wǎng)頁布局中發(fā)揮重要的作用，本文中就通過介紹如何通過position屬性實現(xiàn)CSS下拉菜單體現(xiàn)position屬性的應(yīng)用技巧。

1 position屬性

position是定位屬性，即規(guī)定元素的定位。在CSS布局中，盒子模型是核心，網(wǎng)頁布局由各種大小的“盒子”組成，而“盒子”的定位除了默認(rèn)設(shè)置，還可以用position屬性進(jìn)行個性化設(shè)置，因此，在CSS布局中，position發(fā)揮著非常重要的作用。定位能使元素通過設(shè)置相應(yīng)的偏移值定位到頁面的任何一個地方，定位功能非常靈活。

position在CSS面板中的定位類中設(shè)置，如圖1所示。

2 position屬性設(shè)置與偏移屬性設(shè)置

2.1 position屬性設(shè)置

position的屬性取值有四種，即static、relative、absolute和fixed。通過這四種屬性設(shè)置元素是否脫離文檔流進(jìn)行定位，再通過 top、left、bottom、right四個偏移屬性定義元素在定位屬性定位下從基準(zhǔn)位置發(fā)生偏移。

圖1 position屬性在CSS面板中的定義

position的屬性取值中，static是默認(rèn)定位值，對象遵循正常文檔流，top、right、bottom、left等屬性不會被應(yīng)用；relative是相對定位，這里的相對是指元素相對于原本在文檔中的位置，依據(jù)top、right、bottom、left等屬性值在正常文檔流中偏移位置，雖然元素脫離了原來的文檔流的布局，但對象遵循正常文檔流，在文檔流的位置遺留空白區(qū)域；absolute是絕對定位，對象脫離正常文檔流，使用top、right、bottom、left等屬性進(jìn)行絕對定位，遺留下來的空間由后面的元素填充；position被設(shè)置為fixed的元素，對象脫離正常文檔流，使用top、right、bottom、left等屬性以窗口為參考點進(jìn)行定位，當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動。

這里所說的文檔流，是指將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。只有三種情況會使得元素脫離文檔流，分別是：浮動、絕對定位和相對定位。

在實際應(yīng)用中，定位屬性的取值中用得最多的是絕對定位(absolute)和相對定位(relative)。定義為絕對定位屬性的盒子的位置以它的包含框為基準(zhǔn)進(jìn)行定位，所謂包含框，是指距離它最近的設(shè)置了定位屬性的父級元素的盒子，如果它所有的父級元素都沒有設(shè)置定位屬性，那么包含框就是頁面文檔窗口，即以屏幕左上角原點為坐標(biāo)原點。絕對定位的元素對其他元素的盒子的定位沒有影響，對于其他盒子，就好像這個盒子完全不存在。如果對一個元素定義相對定位屬性(position:relative;)那么它將保持在原來的位置上不動。如果再對它通過top、left屬性值設(shè)置垂直或水平偏移量，那么它將“相對于”它原來的位置發(fā)生移動。

2.2 偏移屬性設(shè)置

偏移屬性是指使元素在定位屬性定位下從基準(zhǔn)位置發(fā)生的偏移量，偏移屬性分別是top、left、bottom、right四個屬性，設(shè)置方法如下所示：

top：指相對于定位基準(zhǔn)的上邊向下偏移的量。

right：指相對于定位基準(zhǔn)的右邊向左偏移的量。

bottom：指相對于定位基準(zhǔn)的下邊向上偏移的量。

left：指相對于定位基準(zhǔn)的左邊向右偏移的量。

它們的取值可以為像素，也可以是百分比。在實際應(yīng)用中，四種偏移屬性值不會同時設(shè)置，常用的屬性是top 和left。

3 利用position屬性設(shè)置制作CSS下拉菜單

下拉菜單是網(wǎng)頁中常見的高級界面元素。一般下拉菜單都用JavaScript制作，如在Dreamweaver中使用“行為”就可制作下拉菜單，但這樣制作的下拉菜單界面不美觀，而且代碼復(fù)雜，如果使用CSS來制作下拉菜單，它的代碼更簡潔、界面更美觀，而且占用的資源更少。

制作CSS下拉菜單的原理就是利用position屬性對一級導(dǎo)航項與下拉菜單的定位設(shè)置，下拉菜單的特點是彈出時浮在網(wǎng)頁上的，不占據(jù)網(wǎng)頁空間，所以放置下拉菜單的元素必須設(shè)置為絕對定位元素，而且下拉菜單位置是依據(jù)它的導(dǎo)航項來定位的，同時導(dǎo)航項要固定其位置，所以導(dǎo)航項應(yīng)該設(shè)置為相對定位，作為下拉菜單的定位基準(zhǔn)。當(dāng)鼠標(biāo)滑到導(dǎo)航項時，顯示下拉菜單；當(dāng)鼠標(biāo)離開時，設(shè)置下拉菜單元素的display設(shè)置為none，則下拉菜單就被隱藏起來。制作下拉菜單方法如下：

下拉菜單采用二級列表結(jié)構(gòu)，第一級放導(dǎo)航項，第二級放下拉菜單。首先寫出它的結(jié)構(gòu)代碼，此時顯示效果如圖2所示。

圖2 下拉菜單基本結(jié)構(gòu)

可以看到下拉菜單被寫在內(nèi)層的ul里，只需要控制這個ul元素的顯示和隱藏就能實現(xiàn)下拉菜單效果。

設(shè)置第一層li為左浮動，這樣導(dǎo)航項就會水平排列，同時去除列表的小黑點、填充和邊界。此時顯示效果如圖3。再設(shè)置導(dǎo)航項li為相對定位，讓下拉菜單以它為基準(zhǔn)定位。代碼如下：

#nav,#nav ul{ padding:0;margin:0;text-align:center;list-style-type:none;}

li {float: left; width: 120px; position:relative; }

圖3 下拉菜單水平排列——設(shè)置第一li 左浮動

設(shè)置下拉菜單為絕對定位，位于導(dǎo)航項下24px，left設(shè)置為0px。默認(rèn)狀態(tài)下隱藏下拉菜單ul，所以display設(shè)置為none。

li ul{ display:none; position:absolute; left:0px; top:24px; }

再添加交互，當(dāng)鼠標(biāo)滑過時顯示下拉菜單ul。此時在Firefox中就可以看到鼠標(biāo)滑過時彈出下拉菜單的效果了，如圖4，只是不太美觀

li:hover ul{ display:block; }/*IE 6不支持非a元素的偽類，故IE6不顯示下拉菜單*/

圖4 添加了交互的下拉菜單——當(dāng)鼠標(biāo)滑過時顯示下拉菜單

此時，由于IE6瀏覽器不支持li:hover偽類，所以無法彈出菜單，通過后面的JavaScript代碼解決該問題。

最后改變下拉菜單的CSS樣式，使它更美觀，并添加交互效果，代碼如下，最終在Firefox中的效果如圖5所示。

ul li a{display:block;font-size:14px;border:1px solid #ccc;text-align:center;padding:3px;

text-decoration: none;color:#333;height:1em; /*解決IE 6的bug */}

ul li a:hover{background-color:#f4f4f4;color:#FF0000;}

圖5 對下拉菜單進(jìn)行美化后的效果

此時，頁面如果在IE6瀏覽器中是看不到效果的，因此還需要解決兼容IE6瀏覽器的問題，這里采用的方法是在網(wǎng)頁中插入下面一段JavaScript代碼，插入的地方是在之后之前。代碼如下：

并添加一條CSS選擇器，代碼如下，使JavaScript能動態(tài)地為li元素添加、移除“.over”這個類控制“l(fā)i ul”的顯示和隱藏。

li.over ul{display:block;}

將此應(yīng)用技巧應(yīng)用到實際頁面設(shè)計中，并用CSS進(jìn)行美化外觀，實現(xiàn)效果如圖6 所示。

圖6 CSS下拉菜單在實際頁面運(yùn)用的效果圖

4 結(jié)論

position 屬性是一個在CSS布局中能讓元素“隨心所欲”定位的屬性，通過position屬性設(shè)置，元素可以脫離文檔流，定位在文檔中的任何位置，這樣使得元素與元素之間的位置靈活設(shè)置。position屬性的設(shè)置核心是對static、relative、absolute和fixed的理解，特別是對相對定位relative和絕對定位absolute屬性的理解和靈活運(yùn)用。如果一個元素設(shè)置position 為relative，將根據(jù)top、right、bottom、left的值按照它理應(yīng)所在的位置進(jìn)行偏移，偏移的基點是根據(jù)它原來的位置，relative的“相對的”意思也正體現(xiàn)于此。而發(fā)生偏移后，相對于原來的位置留下的空白區(qū)域仍然存在，其它元素不得占用。如果一個元素設(shè)置position 為absolute，該元素偏移位置的基點有兩種可能性：一，當(dāng)該元素有父對象，并且父對象也設(shè)置了position屬性，且position的屬性值為absolute或者relative時，也就是說，不是默認(rèn)值的情況，此時該元素就以這個父對象作為基點進(jìn)行定位；二，當(dāng)該元素不存在一個有著position屬性的父對象，那么就以文檔作為基點進(jìn)行定位。

在本文的CSS下拉菜單案例中，第一級導(dǎo)航項的li元素就是下拉菜單的li ul元素的父對象，當(dāng)li元素的position設(shè)置為relative，li ul元素的position設(shè)置為absolute時，li ul元素是根據(jù)li元素的位置發(fā)生偏移，因此li ul元素的偏移值設(shè)置為“l(fā)eft:0px; top:24px;”使得下拉菜單僅在第一級導(dǎo)航項的縱向發(fā)生了偏移。

因此，如果掌握了position 屬性的屬性值的設(shè)置，也就能在CSS網(wǎng)頁布局中靈活地對元素進(jìn)行定位，做出外表美觀、結(jié)構(gòu)緊湊、代碼優(yōu)化的頁面。

[1] Position_百度百科[EB/OL] http://baike.baidu.com

[2] HTML DOM position 屬性[EB/OL] http://www.w3school.com.cn/jsref/prop_style_position.asp

[3] 朱印宏.CSSS商業(yè)網(wǎng)站布局之道[M].北京：清華大學(xué)出版社，2007：246-255.

[4] 唐四薪.基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計與制作[M].北京：清華大學(xué)出版社，2011：157-160.

[5] 苗冬霞.網(wǎng)頁設(shè)計與制作實用教程[M].武漢：華中科技大學(xué)，2014:165-167.

(責(zé)任編輯：李文英)

An Application Skill of Position Property in CSS Web Layout

LIANG Jinglin

(Wuhan Engineering Institute, Wuhan 430080, Hubei)

Position property and its function and basic set methods in web design are introduced in this article. A CSS pull-down menu is developed by the position property, which shows the flexible location-based features of the position property.

position; CSS web layout

2015-03-16

2015-05-22

梁靜琳(1981～)，女，碩士，講師.E-mail:ljl@wgxy.net

TP393.092.2

A

1671-3524(2015)02-0055-04