怎樣對(duì)網(wǎng)頁(yè)標(biāo)簽進(jìn)行精準(zhǔn)定位？【web前端】

　　浮動(dòng)布局雖然靈活，但是卻無(wú)法對(duì)標(biāo)簽的位置進(jìn)行精確地控制。在CSS中，通過(guò)定位屬性(position)可以實(shí)現(xiàn)網(wǎng)頁(yè)標(biāo)簽的精確定位。下面將對(duì)標(biāo)簽的定位屬性以及常用的幾種定位方式進(jìn)行詳細(xì)地講解。

　　1. 認(rèn)識(shí)定位屬性

　　制作網(wǎng)頁(yè)時(shí)，如果希望標(biāo)簽內(nèi)容出現(xiàn)在某個(gè)特定的位置，就需要使用定位屬性對(duì)標(biāo)簽進(jìn)行精確定位。標(biāo)簽的定位屬性主要包括定位模式和邊偏移兩部分，對(duì)它們的具體介紹如下。

　　(1) 定位模式

　　在CSS中，position屬性用于定義標(biāo)簽的定位模式，使用position屬性定位標(biāo)簽的基本語(yǔ)法格式如下。

　　選擇器{position:屬性值;}

　　在上面的語(yǔ)法中，position屬性的常用值有四個(gè)，分別表示不同的定位模式，具體如表1所示。

　　表1 position屬性的常用值

　　定位模式(position)僅僅用于定義標(biāo)簽以哪種方式定位，并不能確定標(biāo)簽的具體位置。在CSS中，通過(guò)邊偏移屬性top、bottom、left或right，可以精確定義定位標(biāo)簽的位置，邊偏移屬性取值為數(shù)值或百分比，對(duì)它們的具體解釋如表2所示。

　　表2 邊偏移設(shè)置方式

　　2. 定位類型

　　標(biāo)簽的定位類型主要包括靜態(tài)定位、相對(duì)定位、絕對(duì)定位和固定定位，對(duì)它們的具體介紹如下。

　　(1)靜態(tài)定位

　　靜態(tài)定位是標(biāo)簽的默認(rèn)定位方式，當(dāng)position屬性的取值為static時(shí)，可以將標(biāo)簽定位于靜態(tài)位置。所謂靜態(tài)位置就是各個(gè)標(biāo)簽在HTML文檔流中默認(rèn)的位置。

　　任何標(biāo)簽在默認(rèn)狀態(tài)下都會(huì)以靜態(tài)定位來(lái)確定自己的位置，所以當(dāng)沒(méi)有定義position屬性時(shí)，并不是說(shuō)明該標(biāo)簽沒(méi)有自己的位置，它會(huì)遵循默認(rèn)值顯示為靜態(tài)位置。在靜態(tài)定位狀態(tài)下，我們無(wú)法通過(guò)邊偏移屬性(top、bottom、left或right)來(lái)改變標(biāo)簽的位置。

　　(2)相對(duì)定位

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

　　(3) 絕對(duì)定位

　　絕對(duì)定位是將標(biāo)簽依據(jù)最近的已經(jīng)定位(絕對(duì)、固定或相對(duì)定位)的父標(biāo)簽進(jìn)行定位，若所有父標(biāo)簽都沒(méi)有定位，設(shè)置絕對(duì)定位的標(biāo)簽會(huì)依據(jù)body根標(biāo)簽(也可以看做瀏覽器窗口)進(jìn)行定位。當(dāng)position屬性的取值為absolute時(shí)，可以將標(biāo)簽的定位模式設(shè)置為絕對(duì)定位。

　　然而在網(wǎng)頁(yè)設(shè)計(jì)中，一般需要子標(biāo)簽相對(duì)于其父標(biāo)簽的位置保持不變，也就是讓子標(biāo)簽依據(jù)其父標(biāo)簽的位置進(jìn)行絕對(duì)定位，此時(shí)如果父標(biāo)簽不需要定位，該怎么辦呢?

　　對(duì)于上述情況，可將直接將父標(biāo)簽設(shè)置為相對(duì)定位，但不對(duì)其設(shè)置偏移量，然后再對(duì)子標(biāo)簽應(yīng)用絕對(duì)定位，并通過(guò)偏移屬性對(duì)其進(jìn)行精確定位。這樣父標(biāo)簽既不會(huì)失去其空間，同時(shí)還能保證子標(biāo)簽依據(jù)父標(biāo)簽準(zhǔn)確定位。

　　注意：

　　1、如果僅對(duì)標(biāo)簽設(shè)置絕對(duì)定位，不設(shè)置邊偏移，則標(biāo)簽的位置不變，但該標(biāo)簽不再占用標(biāo)準(zhǔn)文檔流中的空間，會(huì)與上移的后續(xù)標(biāo)簽重疊。

　　2、定義多個(gè)邊偏移屬性時(shí)，如果left和right參數(shù)值沖突，以left參數(shù)值為準(zhǔn);如果top和bottom參數(shù)值沖突，以top參數(shù)值為準(zhǔn)。

　　(4) 固定定位

　　固定定位是絕對(duì)定位的一種特殊形式，它以瀏覽器窗口作為參照物來(lái)定義網(wǎng)頁(yè)標(biāo)簽。當(dāng)position屬性的取值為fixed時(shí)，即可將標(biāo)簽的定位模式設(shè)置為固定定位。

　　當(dāng)對(duì)標(biāo)簽設(shè)置固定定位后，該標(biāo)簽將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)，也不管瀏覽器窗口的大小如何變化，該標(biāo)簽都會(huì)始終顯示在瀏覽器窗口的固定位置。

猜你喜歡

JSTL標(biāo)簽有哪些？常用JSTL標(biāo)簽介紹

HTML入門(mén)之 a 標(biāo)簽【卡其漫畫(huà)3】

頁(yè)面布局的排列規(guī)則是什么？怎樣清除浮動(dòng)標(biāo)簽？/a>

黑馬程序員web前端培訓(xùn)課程