Position屬性四個取值用法和區別

2021-08-22 16:31:10 字數 2657 閱讀 5643

-static

-relative

-absolute

-fixed

-relative和absolute的區別

-z-index屬性

·position屬性有以下四個取值:

static:靜態定位,是position屬性的預設值,表示無論怎麼設定top、bottom、right、left屬性元素的位置(與外部位置)都不會發生改變。

relative:相對定位,表示用top、bottom、right、left屬性可以設定元素相對與其相對於初始位置的相對位置。

absolute:絕對定位,表示用top、bottom、right、left屬性可以設定元素相對於其父元素(除了設定了static的父元素以外)左上角的位置,如果父元素設定了static,子元素會繼續追溯到祖輩元素一直到body。

fixed:絕對定位,相對於瀏覽器視窗進行定位,同樣是使用top、bottom、right、left。

四種取值中,除了static之外,其他屬性都可通過z-index進行層次分級

static(靜態定位)是預設值,元素出現在正常的流中。不會受到top, bottom, left, right影響。

定位為relative的元素脫離正常的文字流中,但其在文字流中的位置依然存在。

注:元素脫離正常的文字流意思是外觀位置發生了改變,即是實際頁面的可以看到的變化,文字流的位置依然存在指的是預設的位置(設定之前的位置)還在,相當於「雖然設定了位置偏移,但元素的靈魂還在原地~」

一般情況下以父級的左上角為原定,在沒有父級的時候,他是參照瀏覽器左上角,如果在沒有父級元素的情況下,存在文字,則以文字的底部為原始點進行定位並將文字斷開。

如果父級沒有設定position屬性,仍舊以父級的左上角為原點進行定位。

如果父級設定position屬性,不管是取哪個值,都以父級的左上角為原點進行定位。如果父級有padding屬性,那麼就以內容區域的左上角為原點,進行定位。

以上三點可以總結出,無論父級存在不存在,無論有沒有trbl,均是以父級的左上角進行定位,但是父級的padding屬性會對其影響。

定位為absolute的層脫離正常文字流,但與relative的區別是其在正常流中的位置不再存在。(這裡是與relative的第乙個不同點)

注:跟relative一樣,這裡也是實際上可以看到的布局發生了變化,跟relative不同的是,此時它的「靈魂」不在原地,也不在新的位置,而是不復存在了。

在這裡要注意別跟fixed值混淆,absolute並不是永遠根據瀏覽器視窗進行定位的,這是fixed的特性,absolute要更加複雜:

一般情況下以父級的左上角定位,在沒有父級的時候,他是參照瀏覽器左上角

(這與relative完全一致);

如果在沒有父級元素的情況下,存在文字,則以它前面的最後乙個文字的右上角為原點進行定位但是不斷開文字,覆蓋於上方。(這裡是與relative的第二個不同點);

如果父級沒有設定position屬性,那麼當前的absolute則以瀏覽器左上角為原始點進行定位,位置將由偏移設定(top、bottom、left、right)決定;(這與relative完全一致)

如果父級設定position屬性(無論是absolute還是relative),則以父級的左上角為原點進行定位,位置由偏移設定(top、bottom、left、right)決定;(這與relative完全一致)。

即使父級有padding屬性,對其也不起作用,說簡單點就是:它只堅持一點,就以父級左上角為原點進行定位,父級的padding對其根 本沒有影響。 (這裡是與relative的第三個不同點)

其實fixed和absolute是一樣的,唯一的區別在於:absolute元素是根據最近的定位上下文確定位置,而fixed永遠根據瀏覽器確定位置。

fixed元素與文件流無關,可重疊也不回影響其他元素布局,只一直根據瀏覽器左上角定位。

特徵

relative

absolute

在正常流中的位置存在

不存在無父元素但存在文字以文字底部為原點並會斷開文字

以最後乙個文字右上角為原點並不斷開文字

父元素的padding屬性對元素位置有無影響有影響

無影響

z-index,又稱為物件的層疊順序,它用乙個整數來定義堆疊的層次,整數值越大,則被層疊在越上面,當然這是指同級元素間的堆疊,如果兩個物件的此屬性具有同樣的值,那麼將依據它們在html文件中流的順序層疊,寫在後面的將會覆蓋前面的。需要注意的是,父子關係是無法用z-index來設定上下關係 的,一定是子級在上父級在下。

注:使用static 定位或無position定位的元素z-index屬性是無效的。

Position屬性四個值

1 static 靜態定位 預設值。沒有定位,元素出現在正常的流中 忽略 top,bottom,left,right 或者 z index 宣告 2 fixed 固定定位 生成絕對定位的元素,相對於瀏覽器視窗進行定位 元素的位置通過 left top right 以及 bottom 屬性進行規定。可...

position屬性的四個value

as we all know,position屬性有四個值,分別為 relative,fixed,absolute,static.1,relative相對定位 不會脫離文件流 在乙個相對定位 position屬性的值為relative 的元素上設定 top right bottom 和 left 屬...

前端定位Position屬性四個值

1 static 靜態定位 預設值。沒有定位,元素出現在正常的流中。2 relative 相對定位 生成相對定位的元素,通過top,bottom,left,right的設定相對於其正常 原先本身 位置進行定位。可通過z index進行層次分級。3 absolute 絕對定位 生成絕對定位的元素,相對...