HTML中元素的定位方式

2022-02-17 10:08:44 字數 1553 閱讀 8561

初中物理就學過,位置是相對的,要有參照物,因此,所有定位都是相對參照物的定位。

position 屬性:

規定元素的定位型別,該屬性的可選值有static、relative、absolute、fixed、inherit。定義了position屬性後,經常還要定義相對參照物的偏移量,即left,right,top,bottom屬性值,當然,也可以不定義,那樣的話,就是在參照物的位置上。

float屬性:

規定元素是否浮動,其實,這個屬性也是定位的一種型別,但搞不懂為什麼它沒有出現在position可選值中,而非要做成乙個單獨的屬性,比較可能的原因是,在position的可選值中(static除外),是指定相對參照物的具體偏移量——left,right,top,bottom,而浮動指定的不是具體的偏移量,而只是偏移方向而已,浮動的框只能向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。因此兩種定位方式沒法統一起來。

z-index屬性:

上面的定位都在是二維空間做的,定位過程中有可能出現元素部分重疊的情況,這種情況下,誰覆蓋誰呢,由此引用了z-index屬性,來指定元素的層次。注意:static定位的元素,其z-index恆等於0,無法修改;另外,z-index屬性只能用於position=relative/absolute/fixed這些已經在二維空間定位過的元素。屬性值

定位參照物

是否仍佔據文件流的位置

描述position  

static

由文件流自然形成

是預設值,,無需顯式定義

。元素出現在正常的流中(忽略 top, bottom, left, right, z-index 宣告)。

relative

相對自己在文件流中的位置

是,該元素在文件流中佔據的空間不會釋放

生成相對定位的元素,相對於其文件流位置進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

absolute

相對第乙個定位過的父元素,即position=relative/absolute/fixed的父元素,(static定位過的父元素不算)

否,已經脫離文件流

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed

相對瀏覽器視窗

否,已經脫離文件流

生成絕對定位的元素,相對於瀏覽器視窗進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

inherit

繼承父元素的定位型別

由父元素的定位型別來確定

規定應該從父元素繼承 position 屬性的值。

float

left、right、none、inherit

相對父元素(不論是否定位過)和前乙個浮動框

否,已經脫離文件流

浮動的框只能向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止

html中元素定位

定位 元素通過定位屬性與定位座標確定顯示位置.屬性position static 無特殊定位,物件遵循html定位預設規則 fiexd 固定定位 relative 相對定位 absolute 絕對定位 四個座標 left 左,right 右,top 頂,botton 底 固定定位fixed l 給元...

css中元素定位

在html中網頁可以看成乙個立體的空間,乙個完整的頁面是由很多個頁面堆積形成的,如下圖所示 css中position屬性有四個可選值,它們分別是 static absolute fixed relative。position static無定位 該屬性值是所有元素定位的預設情況,在一般情況下,我們不...

css中元素的定位

float浮動 定義元素在哪個方向上浮動,通常是用在影象上,然後使文字圍繞周圍,但是,實際使用中,任何元素都可以浮動了,並且,設定此屬性後,該元素會生成乙個塊級框,近乎等於將其轉化為了塊級元素 position屬性中的absolute relative和fixed,先說absolute絕對定位,設定...