全國咨詢/投訴熱線:400-618-4000

怎樣對標簽屬性進行定位?常用定位方式詳解

更新時間:2020年12月24日17時51分 來源:傳智教育 瀏覽次數:

好口碑IT培訓

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

  1. 認識定位屬性

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

  (1) 定位模式

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

  選擇器{position:屬性值;}

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

  表1 position屬性的常用值

1608803174123_11.png

  (2)邊偏移

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

  表2 邊偏移設置方式
1608803183060_12.png

  2. 定位類型

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

  (1)靜態定位

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

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

  (2)相對定位

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

  (3) 絕對定位

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

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

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

  注意:

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

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

  (4) 固定定位

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

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


猜你喜歡:

如何通過meta標簽設置視口?

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

Web前端開發培訓之HTML5標簽使用的常見誤區

傳智教育web前端培訓課程

人妻系列无码专区_漂亮人妻被中出中文字幕_人妻中文制服巨乳中文