網(wǎng)頁設(shè)計(jì)與制作（活頁式） 課件 情景8-9 定位的基本概念

網(wǎng)頁設(shè)計(jì)與制作CSS定位的基本概念授課教師：吳紀(jì)磊HTMLcsscssJavaScript目錄CONTENTS12學(xué)習(xí)目標(biāo)知識講解學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01認(rèn)識CSS定位學(xué)習(xí)目標(biāo)02了解CSS定位基本概念02知識點(diǎn)講解學(xué)習(xí)導(dǎo)航

浮動布局雖然靈活，但是卻無法對元素的位置進(jìn)行精準(zhǔn)的控制。在CSS中，通過CSS定位可以實(shí)現(xiàn)網(wǎng)頁元素的精確定位。

元素的定位屬性主要包括定位模式和邊偏移兩部分。

在CSS中，position屬性用于定義元素的定位模式。

其基本語法格式如下：1、元素的定位屬性選擇器{position:屬性值;}position屬性的常用值：值描述static自動定位（默認(rèn)定位方式）relative相對定位，相對于其原文檔流的位置進(jìn)行定位absolute絕對定位，相對于其上一個已經(jīng)定位的父元素進(jìn)行定位fixed固定定位，相對于瀏覽器窗口進(jìn)行定位1、元素的定位屬性

在CSS中，通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比。

具體解釋如下表所示：邊偏移屬性描述top頂端偏移量，定義元素相對于其父元素上邊線的距離bottom底部偏移量，定義元素相對于其父元素下邊線的距離left左側(cè)偏移量，定義元素相對于其父元素左邊線的距離right右側(cè)偏移量，定義元素相對于其父元素右邊線的距離2、靜態(tài)定位static靜態(tài)定位是元素的默認(rèn)定位方式。

當(dāng)position屬性的取值為static時，可以將元素定位于靜態(tài)位置。所謂靜態(tài)位置就是各個元素在HTML文檔流中默認(rèn)的位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。3、相對定位relative

相對定位是將元素相對于它在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位，當(dāng)position屬性的取值為relative時，可以將元素定位于相對位置。對元素設(shè)置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。

如下圖所示，即是一個相對定位的效果展示：4、絕對定位absolute

絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。

當(dāng)position屬性的取值為absolute時，可以將元素的定位模式設(shè)置為絕對定位。

如下圖所示，即是一個相對定位的效果展示：5、固定定位fixed固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當(dāng)position屬性的取值為fixed時，即可將元素的定位模式設(shè)置為固定定位。當(dāng)對元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。注意：IE6瀏覽器不支持固定定位。6、z-index層疊等級屬性

當(dāng)對多個元素同時設(shè)置定位時，定位元素之間有可能會發(fā)生重疊。

在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對定位元素應(yīng)用z-index層疊等級屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上。02練一練【練一練】運(yùn)行效果03小結(jié)小結(jié)本節(jié)內(nèi)容我們講解了元素的定位屬性，了解了元素定位的常用