怎樣對標(biāo)簽屬性進(jìn)行定位?常用定位方式詳解

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

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

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

　　(1) 定位模式

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

　　選擇器{position:屬性值;}

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

　　表1 position屬性的常用值

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

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

　　2. 定位類型

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

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

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

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

　　(2)相對定位

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

　　(3) 絕對定位

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

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

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

　　注意：

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

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

　　(4) 固定定位

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

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

如何通過meta標(biāo)簽設(shè)置視口？

如何使用CSS控制視頻的寬高？

Web前端開發(fā)培訓(xùn)之HTML5標(biāo)簽使用的常見誤區(qū)

傳智教育web前端培訓(xùn)課程