Position屬性在CSS布局中的應(yīng)用

蔣昀昕

(福建衛(wèi)生職業(yè)技術(shù)學(xué)院公共基礎(chǔ)部，福建 福州 350101)

Position屬性在CSS布局中的應(yīng)用

蔣昀昕

(福建衛(wèi)生職業(yè)技術(shù)學(xué)院公共基礎(chǔ)部，福建 福州 350101)

本文在基于盒子模型的基礎(chǔ)上簡(jiǎn)單介紹了C SS布局概念，對(duì)比分析了CSS中Position屬性的四個(gè)屬性值，并通過(guò)具體的網(wǎng)頁(yè)布局實(shí)例進(jìn)一步說(shuō)明Position屬性中的絕對(duì)定位和相對(duì)定位在C SS布局中的應(yīng)用。

C SS布局；定位；盒子模型；標(biāo)準(zhǔn)文檔流

1 引言

隨著Web技術(shù)的不斷發(fā)展，如何設(shè)計(jì)和布局網(wǎng)頁(yè)以使網(wǎng)站能更好地運(yùn)行，逐漸成為網(wǎng)站設(shè)計(jì)開(kāi)發(fā)人員廣泛關(guān)注的話題。常用的網(wǎng)頁(yè)布局方法主要有三種：表格布局、CSS布局、框架布局。本文在基于CSS盒模型布局的基礎(chǔ)上，闡述了Position屬性的概念，并通過(guò)具體的網(wǎng)頁(yè)布局實(shí)例說(shuō)明如何利用定位屬性進(jìn)行頁(yè)面布局。

2 CSS布局簡(jiǎn)介

CSS的布局排版是一種新的排版理念，完全有別于傳統(tǒng)的排版習(xí)慣。首先它將頁(yè)面從整體上進(jìn)行

盒子模型是CSS布局頁(yè)面時(shí)一個(gè)很重要的概念。在使用CSS布局時(shí)，所有頁(yè)面中的元素都看成是一個(gè)盒子，占據(jù)著一定的頁(yè)面空間。一個(gè)頁(yè)面由很多這樣的盒子組成，如何定位這些盒子是CSS布局的一個(gè)重點(diǎn)。CSS布局的核心是Position屬性，對(duì)元素盒子應(yīng)用這個(gè)屬性，可以相對(duì)于它在常規(guī)文檔流中的位置重新定位。定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素或者另一個(gè)元素甚至瀏覽器窗口本身的位置。

3 Position屬性概念

Position屬性的含義是用來(lái)指定頁(yè)面中塊的位置，即塊相對(duì)于其父塊的位置和相對(duì)于它自身應(yīng)該在的位置。該屬性有4個(gè)值：static（靜態(tài)定位）、relative（相對(duì)定位）、absolute（絕對(duì)定位）、fixed（固定定位）。Static是屬性的默認(rèn)值，也就是該盒子按照標(biāo)準(zhǔn)流進(jìn)行布局。

(1)靜態(tài)定位：在靜態(tài)定位情況下，每個(gè)元素都處在常規(guī)文檔流中[2]。如圖1所示，這是一個(gè)簡(jiǎn)單標(biāo)準(zhǔn)流方式的兩層盒子。父層中包含兩個(gè)子層，所有的塊級(jí)元素都是靜態(tài)定位。在默認(rèn)的靜態(tài)定位下，塊級(jí)元素在頁(yè)面中自上而下堆疊起來(lái)。要想突破靜態(tài)定位提供的這種按順序布局元素的方式，必須把盒子的Position屬性設(shè)置為其它三個(gè)值。

圖1 靜態(tài)定位

(2)相對(duì)定位：使用相對(duì)定位的盒子的位置常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對(duì)于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。使用相對(duì)定位時(shí)，除了將Position屬性設(shè)置為relative之外，還需要指定一定的偏移量，可以通過(guò)left、right、top以及bottom四個(gè)方向來(lái)設(shè)定。如圖2所示，將Box-1設(shè)置為相對(duì)定位，同時(shí)設(shè)置上、左偏移量為30px。與前面靜態(tài)定位的圖相比，Box-1的位置以自身為基準(zhǔn)向上和向左各偏移了30px，而B(niǎo)ox-2的位置沒(méi)有任何變化，好像Box-1還在原來(lái)位置上。所以，使用相對(duì)定位的盒子，會(huì)相對(duì)于它在原本的位置，通過(guò)偏移指定的距離，到達(dá)新的位置，并且對(duì)父級(jí)盒子和兄弟盒子都沒(méi)有影響。

圖2 相對(duì)定位

(3)絕對(duì)定位：使用相對(duì)定位的盒子以它的“最近”的一個(gè)“已經(jīng)定位”的“祖先元素”為基準(zhǔn)進(jìn)行偏移。如圖3所示，左圖的父級(jí)元素定位屬性設(shè)置為relative，Box-2偏移量設(shè)置為向上、向右偏移各30px。因此，Box-2以父級(jí)元素為基準(zhǔn)，從左上角開(kāi)始向下和向左各移動(dòng)30px。右圖的父級(jí)元素定位屬性為static，Box-2偏移量設(shè)置為上、右偏移為0，此時(shí)Box-2以瀏覽器窗口作為定位基準(zhǔn)。所以，絕對(duì)定位的塊級(jí)元素，如果沒(méi)有已經(jīng)定位的祖先元素，則以瀏覽器窗口為基準(zhǔn)定位。“已經(jīng)定位”指的是Position屬性被設(shè)置為除了static以外的任意一種方式，那么該元素就被定義為已經(jīng)定位的元素?！白罱笔侵冈谝粋€(gè)節(jié)點(diǎn)的所有祖先節(jié)點(diǎn)中，找出所有“已經(jīng)定位”的元素中距離該節(jié)點(diǎn)最近的一個(gè)節(jié)點(diǎn)。絕對(duì)定位的盒子從標(biāo)準(zhǔn)流中脫離，這意味著它們對(duì)其后的兄弟盒子的定位沒(méi)有影響。

圖3 絕對(duì)定位

(4)固定定位：固定定位與絕對(duì)定位類似，區(qū)別在于定位的基準(zhǔn)不是祖先元素，而是瀏覽器窗口。當(dāng)拖動(dòng)瀏覽器窗口滾動(dòng)條時(shí)，固定定位元素將保持相對(duì)于瀏覽器窗口不變的位置。如圖4所示，Box-2的位置不會(huì)隨著滾動(dòng)條的拖動(dòng)而改變。

圖4 固定定位

4 網(wǎng)頁(yè)布局實(shí)例分析

網(wǎng)頁(yè)中元素布局方式主要有三種：標(biāo)準(zhǔn)流、浮動(dòng)和定位。除非專門指定，否則所有元素都在標(biāo)準(zhǔn)流中定位。即網(wǎng)頁(yè)中的各種元素按照HTML結(jié)構(gòu)自左向右、自上而下的布局方式。在標(biāo)準(zhǔn)流里，塊級(jí)元素自上而下排列，行內(nèi)元素自左向右排列。

設(shè)置了浮動(dòng)屬性的框脫離了標(biāo)準(zhǔn)流，它可以向左或者向右移動(dòng)直到它的外邊緣碰到了包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｈ绻瑝K太窄，無(wú)法容納水平排列的浮動(dòng)框，那么其它浮動(dòng)塊會(huì)向下移動(dòng)，直到有足夠多的空間。如果浮動(dòng)框的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其它浮動(dòng)框卡住。浮動(dòng)框會(huì)脫離標(biāo)準(zhǔn)文檔流，因此對(duì)于其它元素來(lái)說(shuō)，浮動(dòng)框是不存在的。定位機(jī)制主要應(yīng)用了Position屬性中的相對(duì)定位和絕對(duì)定位。需要注意的是，使用相對(duì)定位的元素框不管它是否進(jìn)行移動(dòng)，元素框仍然占據(jù)原有的位置，即相對(duì)定位的元素框沒(méi)有脫離文檔流。而絕對(duì)定位則與之相反，使用絕對(duì)定位的元素框會(huì)脫離標(biāo)準(zhǔn)文檔流，所以它可以覆蓋頁(yè)面上的其它元素，通過(guò)設(shè)置z-index屬性來(lái)控制這些框的堆放次序。下面以具體網(wǎng)頁(yè)布局實(shí)例來(lái)說(shuō)明Position屬性的使用。

圖5 “易購(gòu)網(wǎng)”網(wǎng)頁(yè)

圖6 網(wǎng)頁(yè)布局分析圖

該“易購(gòu)網(wǎng)”網(wǎng)頁(yè)結(jié)構(gòu)采用的是DIV+CSS進(jìn)行布局。如圖6所示，網(wǎng)頁(yè)整體劃分為三個(gè)板塊：#top版塊、#l_sidebar版塊和r_content版塊。網(wǎng)頁(yè)總體結(jié)構(gòu)為上下結(jié)構(gòu)，主體部分為左右結(jié)構(gòu)。實(shí)現(xiàn)左右結(jié)構(gòu)的布局方法有多種，過(guò)去經(jīng)常使用浮動(dòng)屬性來(lái)實(shí)現(xiàn)，在本例中采用Position屬性的絕對(duì)定位來(lái)實(shí)現(xiàn)。具體方法如下：將#box設(shè)置為#top子塊、#l_sidebar子塊、#r_content子塊最近的定位祖先元素，即設(shè)置#box塊的Position屬性為relative（相對(duì)定位）；同時(shí)將#l_sidebar子塊與#r_sidebar子塊的Position屬性設(shè)置為absolute（絕對(duì)定位），并配合設(shè)置top、left、right屬性，從而實(shí)現(xiàn)左右布局。CSS代碼如下：

#box{

Width:990px;

Margin-top:10px;

Position:relative;

}

#top{

Margin-bottom:10px;

Position:absolute;

Left:5px;

Top:10px;

}

#l_sidebar{

Position:absolute;

Width:190px;

Left:5px;

Top:30px;

}

#r_content{

Width:770px;

Position:absolute;

Top:30px;

Right:0px;

Height:285px;

}

其中，r_content版塊中嵌套了多個(gè)DIV，并且部分層與層之間出現(xiàn)了位置的重疊與覆蓋。為了實(shí)現(xiàn)這種布局結(jié)構(gòu)，可以將這些子DIV的Position屬性全部設(shè)置為絕對(duì)定位。需要特別注意的是，絕對(duì)定位元素框的位置是相對(duì)于離它最近的定位祖先元素來(lái)定位的。因此，在本例中將#r_content元素的Position屬性設(shè)置為absolute（絕對(duì)定位）。#r_content元素可看作是其內(nèi)部嵌套子塊的最近的定位祖先元素，將嵌套子塊的Position屬性也設(shè)置為absolute（絕對(duì)定位），并對(duì)每一個(gè)子塊設(shè)置一定的偏移量，從而實(shí)現(xiàn)圖中右側(cè)的布局結(jié)構(gòu)。在本例中，將最外層塊元素#box定位屬性設(shè)置為relative（相對(duì)定位），其余各子塊定位屬性全部設(shè)置為絕對(duì)定位。核心CSS代碼如下：

#apDiv1{

Position:absolute;

Width:89px;

Height:89px;

Left:4px;

Top:4px;

}

#apDiv2{

Position:absolute;

Width:180px;

Height:240px;

Left:55px;

Top:30px;

}

#apDiv3{

Position:absolute;

Width:150px;

Height:240px;

Left:250px;

Top:30px;

}

#apDiv4{

Position:absolute;

Width:150px;

Height:240px;

Left:410px;

Top:30px;

}

在使用Position屬性進(jìn)行定位時(shí)，要注意一點(diǎn)是，Position屬性不能自適應(yīng)內(nèi)部元素的高度，因此本例#r_content塊中的各個(gè)子塊都需要設(shè)置高度來(lái)固定其大小。

5 結(jié)論

如果用Position來(lái)布局頁(yè)面，屬性為relative的元素可以用來(lái)布局頁(yè)面，屬性為absolute的元素用來(lái)定位其在父級(jí)塊中的位置，此時(shí)需要配合設(shè)置top、left、bottom和right屬性進(jìn)行定位。

[1]Charles Wyke-Smith．CSS設(shè)計(jì)指南（第3版）[M]．北京：人民郵電出版社，2013．

[2]溫謙．C SS設(shè)計(jì)徹底研究[M]．北京：人民郵電出版社，200 8．

Application of Position in CSS Layout

Jiang Yunxin
(Fujian Medical College,Fuzhou 350101,Fujian)

This paper introduces the conception of CSS layout based on the box model.It makes comparative analysis on the four property values of the Position attribution,and illustrates the application of the relative attribution and the absolute attribution of Position in CSS layout by a specific case.

CSS layout；Position；box model；normal document stream

TP393.092

A

1008-6609(2016)10-0058-03

蔣昀昕（19 8 4-），女，安徽合肥人，碩士，講師，研究方向?yàn)閮?yōu)化算法。