當元素設置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 值相同時，後加載的元素顯示優先。