CSS基礎篇-- position屬性講解

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

1. position: static
2. position: inherit
3. position: relative
4. position: absolute
5. position: fixed
6. position: sticky(new)

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

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 元素仍然在原來的位置，並未進行移動，咱們用個例子來講明：

<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 元素的移動

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 元素的存在

position: fixed

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

position: sticky

粘性定位是相對定位和固定定位的混合。元素在跨越特定閾值前爲相對定位，以後爲固定定位。例如：

#one { position: sticky; top: 10px; }

在 viewport 視口滾動到元素 top 距離小於 10px 以前，元素爲相對定位。以後，元素將固定在與頂部距離 10px 的位置，直到 viewport 視口回滾到閾值如下。

粘性定位經常使用於定位字母列表的頭部元素。標示 B 部分開始的頭部元素在滾動 A 部分時，始終處於 A 的下方。而在開始滾動 B 部分時，B 的頭部會固定在屏幕頂部，直到全部 B 的項均完成滾動後，才被 C 的頭部替代。

須指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。
HTML 內容:

<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>

CSS 內容:

dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #CCC
}

兼容性如圖所示：

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

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

例如:
某A元素z-index:1; 其父元素z-index:100,
某B元素z-index:100; 其父元素z-index:99,
某C元素z-index:2; 其父元素與A相同

則瀏覽器之中A元素的顯示層次必定優高於B元素; C顯示的層次高於A元素;

參考

http://www.vanseodesign.com/css/css-positioning/
mozilla:position
使用 position:sticky 實現粘性佈局
參考地址：http://segmentfault.com/a/119...