z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
該屬性設定乙個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。
z-index 屬性值可以是負的, 如果為正數，則離使用者更近，為負數則表示離使用者更遠。
z-index 僅能在定位元素上奏效（position:relative/absolute/fixed;）
這個屬性不會作用於視窗控制項，如select物件。值描述
auto
預設。堆疊順序與父元素相等。
number
設定元素的堆疊順序。
inherit
規定應該從父元素繼承 z-index 屬性的值,任何的版本的 internet explorer （包括 ie8）都不支援屬性值 "inherit"。
不使用z-index的情況，也是預設的情況，即所有元素都不用z-index時，堆疊順序如下(序號越大優先順序越高):
根元素（即html元素）的background和borders
正常流中非定位後代元素
已定位後代元素
即所有定位元素的優先順序高於非定位元素,
但非定位元素和非定位元素之間和 定位元素和定位元素之間的順序取決於html文件出現順序, 靠後的優先
浮動元素z-index位置介於非定位元素和定位元素之間, 堆疊順序如下(序號越大優先順序越高):
根元素（即html元素）的背景和border
正常流中非定位後代元素
浮動元素
正常流中inline後代元素
已定位後代元素
浮動元素之間是不會出現z-index重疊的
非定位元素和非定位元素之間和 定位元素和定位元素之間的順序同上取決於html文件出現順序, 靠後的優先
再次強調z-index只適用於已經定位的元素（即position:relative/absolute/fixed）
簡單來說就是z-index的值越大優先順序越高越靠上, 但是事實上沒這麼簡單
子元素的z-index值只在父元素範圍內有效,什麼意思呢?
每乙個定位元素都歸屬於乙個stacking context。根元素形成root stacking context，而其他的stacking context則由定位元素產生（此定位元素的z-index被定義乙個非auto的z-index值），定位子元素會以這個local stacking context為參考，用相同的規則來決定層疊順序。
當stacking context一樣的時候，就用z-index的值來決定怎樣顯示，如果z-index也相同（即stack level相同），則按照檔中後來者居上的原則（back-to-front ）的順序來層疊。
舉個例子:
定位元素a（z-index:100）裡面有定位元素a1（z-index:300），而定位元素b和元素a兄弟關係（z-index:200）。你會發現無論a1的z-index是多大，也會被z-index是200的b所覆蓋，因為a的z-index只有100。
z-index的堆疊順序是比較複雜的, 本篇只介紹一些簡單的堆疊順序, 推薦乙個比較詳細的說明:
深入 css z index 屬性
說來汗顏，一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發現對z index完全不熟悉。關於z index的問題其實非常少人完全明白它到底是怎麼運作的。事實上這並不複雜，不過如果你不曾花些時間閱讀規範可能你不曾察覺一些重要的觀念。在下面的 html 中我們有三個元素，每乙個元素包...
css z index屬性怎麼用？
css z index 屬性用於設定元素的堆疊順序 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。該屬性僅能在定位元素上奏效 例如 position absolute,position relative,or position fixed css z index屬性怎麼用？z index...
css z index屬性怎麼用
css z index 屬性用於設定元素的堆疊順序 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。該屬性僅能在定位元素上奏效 例如 position absolute,position relative,or position fixed css z index屬性怎麼用？z index...