梁靜琳

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

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

梁靜琳

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

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

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

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

1 position屬性

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

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

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

2.1 position屬性設(shè)置

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

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

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

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

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

2.2 偏移屬性設(shè)置

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

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

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

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

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

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

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

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

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

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

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

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

設(shè)置第一層li為左浮動(dòng)，這樣導(dǎo)航項(xiàng)就會(huì)水平排列，同時(shí)去除列表的小黑點(diǎn)、填充和邊界。此時(shí)顯示效果如圖3。再設(shè)置導(dǎo)航項(xiàng)li為相對(duì)定位，讓下拉菜單以它為基準(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 左浮動(dòng)

設(shè)置下拉菜單為絕對(duì)定位，位于導(dǎo)航項(xiàng)下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)滑過(guò)時(shí)顯示下拉菜單ul。此時(shí)在Firefox中就可以看到鼠標(biāo)滑過(guò)時(shí)彈出下拉菜單的效果了，如圖4，只是不太美觀(guān)

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

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

此時(shí)，由于IE6瀏覽器不支持li:hover偽類(lèi)，所以無(wú)法彈出菜單，通過(guò)后面的JavaScript代碼解決該問(wèn)題。

最后改變下拉菜單的CSS樣式，使它更美觀(guān)，并添加交互效果，代碼如下，最終在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 對(duì)下拉菜單進(jìn)行美化后的效果

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

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

li.over ul{display:block;}

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

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

4 結(jié)論

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

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

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

[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)頁(yè)設(shè)計(jì)與制作[M].北京：清華大學(xué)出版社，2011：157-160.

[5] 苗冬霞.網(wǎng)頁(yè)設(shè)計(jì)與制作實(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