怎樣對網頁標簽進行精準定位？【web前端】

更新時間:2020-12-24 來源:黑馬程序員瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

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

　　1. 認識定位屬性

　　制作網頁時，如果希望標簽內容出現在某個特定的位置，就需要使用定位屬性對標簽進行精確定位。標簽的定位屬性主要包括定位模式和邊偏移兩部分，對它們的具體介紹如下。

　　(1) 定位模式

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

　　選擇器{position:屬性值;}

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

　　表1 position屬性的常用值

　　(2)邊偏移

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

　　表2 邊偏移設置方式

　　2. 定位類型

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

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

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

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

　　(2)相對定位

　　相對定位是將標簽相對于它在標準文檔流中的位置進行定位，當position屬性的取值為relative時，可以將標簽相對定位。對標簽設置相對定位后，我們可以通過邊偏移屬性改變標簽的位置，但是它在文檔流中的位置仍然保留。

　　(3) 絕對定位

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

　　然而在網頁設計中，一般需要子標簽相對于其父標簽的位置保持不變，也就是讓子標簽依據其父標簽的位置進行絕對定位，此時如果父標簽不需要定位，該怎么辦呢?

　　對于上述情況，可將直接將父標簽設置為相對定位，但不對其設置偏移量，然后再對子標簽應用絕對定位，并通過偏移屬性對其進行精確定位。這樣父標簽既不會失去其空間，同時還能保證子標簽依據父標簽準確定位。

　　注意：

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

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

　　(4) 固定定位

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

　　當對標簽設置固定定位后，該標簽將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器窗口的大小如何變化，該標簽都會始終顯示在瀏覽器窗口的固定位置。