CSS 屬性之 position講解

2021-08-03 04:45:22 字數 2562 閱讀 6242

postion 屬性定義了乙個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值:

position: static

position: inherit

position: relative

position: absolute

position: fixed

依次講解這5個值的應用。

position: static

static 為position 屬性的預設值,static 元素會遵循正常的文件流,且會忽略 top,bottom,left,right 等屬性。

position: inherit

inherit 值如同其他 css 屬性的 inherit 值,即繼承父元素的 position 值。

position: relative

relative 元素遵循正常的文件流,所以周圍元素不會忽略它的存在,relative 元素同樣支援 top,bottom,left,right 等屬性。當我們使用 top,bottom,left,right等屬性對 relative 元素進行相對定位時的效果有點類似於 margin 屬性達到的效果,但是區別在於, relative 元素周圍的元素將會忽略 relative 元素的移動。我們注意,當 relative 元素未使用定位屬性進行相對定位時,它不會被周圍的元素忽略,但利用定位屬性進行定位後,周圍的元素會忽略 relative 元素的移動,它們會認為 relative 元素仍然在原來的位置,並未進行移動,我們用個例子來說明:

im a

relative

element

div>

im a default element

div>//並未忽略 relative 元素的存在

im a

relative

element

div>

im a default element

div>//忽略了 relative 元素的移動

position: absolute

absolute 元素將會脫離正常的文件流,所以 其周圍的元素將會忽略它的存在。如同 absolute 元素的 display 屬性被設為了 none 一樣。此時,我們可以使用 top,bottom,left,right 等屬性對 absolute 元素進行絕對定位。一般情況下定義兩個屬性,top 或 bottom,left 或 right。

這個絕對定位需要稍微理解下,因為這裡容易與 relative 產生混淆。

例如,當對 absolute 元素新增 left:10px 定位後,這個 left 究竟是對哪個元素而言呢?其實,此時將會往上查詢 absolute 元素的第乙個父元素,如果該父元素的 position 值存在(且不為 static),那麼這個 left:10px 就是根據該父元素進行的定位,否則將會繼續查詢該父元素的父元素,一直追溯到某個父元素具備不為 static 的 position 值為止,如果不存在滿足條件的父元素,則會根據最外層的 window 進行定位。

im an absolute element

div>

im a default element

div>//直接忽略 absolute 元素的存在

position: fixed

fixed 元素將會脫離正常的文件流,所以它與 absolute 元素很相似,同樣會被周圍元素忽略,支援 top,bottom,left,right 屬性,但兩者仍有很大不同。

首先,fixed 元素定位與它的父元素無任何關係,它永遠是相對最外層的 window 進行定位的。

第二,fixed 元素正如它的名字一樣,它是固定在螢幕的某個位置,它不會因為螢幕的滾動而消失。

z-index

為什麼要在這裡提到 z-index 屬性呢?那是因為 z-index 屬性只對定位元素有效,即 position 值為 absolute,relative,fixed 時才有效。我們首先了解下什麼叫 z-index。z-index 值代表的是元素的堆疊順序,值越高則顯示順序越優先。

im an absolute element

div>

im a fixed element

div>//fixed 元素 z-index 比 absoulute 元素高,所以顯示在前面

(我把背景色調為非透明,這樣可以看得更清楚),假如 z-index 值相同會出現什麼情況呢?

im an absolute element

div>

im a fixed element

div>//z-index 值相同,仍然顯示為 fixed 元素

所以我們知道,當 z-index 值相同時,後載入的元素顯示優先。

關於z-index屬性, 上下的層次關係也是按照樹狀結構進行層次劃分的, 優先父元素之間的分集, 子元素這層次排序依賴於父元素的層次.

例如:

某a元素z-index:1; 其父元素z-index:100,

某b元素z-index:100; 其父元素z-index:99,

某c元素z-index:2; 其父元素與a相同

CSS標籤屬性之position

position屬性規定元素的定位型別。所以的主流瀏覽器都能夠很好的支援position屬性。任何版本的ie瀏覽器 internet explorer 包括ie8都 不支援position屬性值 inherit 一下五個值是position屬性常用的 absolute 生成絕對定位的元素,相對於st...

CSS 定位position屬性

div h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容,即 塊框 與之相反,span 和 strong 等元素稱為 行內元素 這是因為它們的內容顯示在行中,即 行內框 您可以使用 display 屬性改變生成的框的型別。將 display 屬性設定為 block,可以讓行內元素...

CSS 定位屬性position

一 position 屬性 規定元素的定位型別。即元素脫離文件流的布局,在頁面的任意位置顯示。有4種不同型別的定位 absolute 絕對定位 脫離文件流的布局,遺留下來的空間由後面的元素填充。定位的起始位置為最近的父元素 postion不為static 否則為body文件本身。relative 相...