使用前提

z-index只能在position屬性值為relative或absolute或fixed的元素上有效。

基本原理

z-index值可以控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素髮生重疊時會在值小的元素上面。

使用的相對性

z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊“拼爹”）。向上追溯找不到含有z-index值的父元素的情況下，則可以視為自由的z-index元素，它可以與父元素的同級兄弟定位元素或其他自由的定位元素來比較z-index的值，決定其堆疊順序。同級元素的z-index值如果相同，則堆疊順序由元素在文件中的先後位置決定，後出現的會在上面。

所以如果當你發現一個z-index值較大的元素被值較小的元素遮擋了，請先檢查它們之間的dom結點關係，多半是因為其父結點含有啟用並設定了z-index值的position定位元素。

也因為這個相對性，還會引發瀏覽器表現不一致出現相容問題。原因是ie6、7下面position值為非static的元素在未設定z-index值的情況下都會被隱含新增z-index:0，而Firefox/Chrome等現代瀏覽器會遵循標準預設z-index:auto不會產生值。

還有一點需要注意，負值的z-index也依照大小比較的原理，但一般來說負值的z-index會被透明的body覆蓋導致點選等事件響應出現問題，請謹慎使用。

普通元素的堆疊順序由元素在文件中的先後位置決定，後出現的會在上面，請小心計算好浮動和負邊距佈局，注意視窗元素的特殊性；非同級關係和非父子關係定位元素之間的堆疊順序，要向上追溯到其為兄弟關係的父元素上，先比較其z-index值，只有父輩元素中的z-index值較大的後代子元素才能超過z-index值較小的父輩元素及其子孫元素。