position:absolute會使元素脫離文檔流


當元素設置position:absolute時,會脫離正常文檔流,后面元素會忽略該元素-》覆蓋

可以給元素設置min-height解決

-------------------------------------------------------

 

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

  • position: absolute
  • position: relative
  • position: fixed
  • position: static
  • position: inherit

本文主要詳細討論 position 屬性的前三個值,首先大概講解下后兩個值:

static

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

inherit

inherit 值如同其他 css 屬性的 inherit 值,即繼承父元素的 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 進行定位。

<div style="position: absolute">Im an absolute element</div> <div>Im a default element</div> 

請輸入圖片描述//直接忽略 absolute 元素的存在

relative

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

<div style="position: relative">Im a relative element</div> <div>Im a default element</div> 

請輸入圖片描述//並未忽略 relative 元素的存在

<div style="position: relative;top:10px">Im a relative element</div> <div>Im a default element</div> 

請輸入圖片描述//忽略了 relative 元素的移動

fixed

fixed 元素將會脫離正常的文檔流,所以它與 absolute 元素很相似,同樣會被周圍元素忽略,支持top,bottom,left,right 屬性,但兩者仍有很大不同。
首先,fixed 元素定位與它的父元素無任何關系,它永遠是相對最外層的 window 進行定位的。
第二,fixed 元素正如它的名字一樣,它是固定在屏幕的某個位置,它不會因為屏幕的滾動而消失。

<div style="height:1000px"> <div style="position: absolute;">Im an absolute element</div> <div style="position: fixed;">Im a fixed element</div> <div>Im a default element</div> </div> 

請輸入圖片描述//如同 absolute,fixed元素也被周圍元素忽略

因為外層 div 高度超過一屏,所以現在我們往下滾動屏幕。

請輸入圖片描述//只有 fixed 元素未因為屏幕滾動而消失,因為它是“固定”的

z-index

為什么要在這里提到 z-index 屬性呢?那是因為 z-index 屬性只對定位元素有效,即 position 值為absolute,relative,fixed 時才有效。我們首先了解下什么叫 z-index

      請輸入圖片描述

從上圖我們不難發現 z-index 值代表的是元素的堆疊順序,值越高則顯示順序越優先。

<div style="position: absolute;z-index:1">Im an absolute element</div> <div style="position: fixed;z-index:2">Im a fixed element</div> 

請輸入圖片描述//fixed 元素 z-index 比 absoulute 元素高,所以顯示在前面

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

<div style="position: absolute;z-index:1">Im an absolute element</div> <div style="position: fixed;z-index:1">Im a fixed element</div> 

請輸入圖片描述//z-index 值相同,仍然顯示為 fixed 元素

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM