寫css z-index的時候經常會出現很多莫名其妙的問題，下面對z-index屬性做徹底的剖析，本文參考了《一個css中z-index的用法》，並做了很多demo，方便了解z-index的用法.
一、z-index是什么
z-index屬性決定了一個HTML元素的層疊級別。元素層疊級別是相對於元素在Z軸上（與X軸Y軸相對照）的位置而言。一個更高的Z-index值意味着這個元素在疊層順序中會更靠近頂部。這個層疊順序沿着垂直的線軸被呈現。為了更清晰的描述Z-index是如何工作的，這張圖片誇大展示了層疊元素在視覺位置上的關系。
二、自然層疊順序demo
為了更好的表現出最基本的層疊，看下面的demo，地址 http://jsbin.com/yezisino/1/edit
html代碼：
<div class="blue"></div> <div class="green"></div> <div class="red"></div>
css：
.blue,.green,.red{
width:200px;
height:200px;
}
.blue{
background:blue;
}
.green{
background:green;
margin-top:-100px;
margin-left:50px;
}
.red{
background:red;
margin-top:-100px;
margin-left:100px;
}
效果圖：
三、驗證z-index
為了驗證z-index的作用，對上述代碼進行修改，實例如下
分別把blue green red的z-index設置為999 99 9，但是看上去好像和之前沒什么變化，原因是因為Z-index只能工作在被明確定義了absolute，fixed或relative 這三個定位屬性的元素中。so 我們繼續對css做一些修改：
如圖所示，顯示的順序已經按照我們設置的z-index大小展現了
四、多個父元素中子元素的z-index設置
在原基礎之上，我們對html和css做一些改動，驗證一下父元素不同的情況下 ，子元素設置不同的z-index顯示效果
可以很明顯的看出，不同父元素的子元素之間進行顯示時，會根據父級元素的z-index進行渲染.
五、世上本沒有z-index
要有這樣子的意識：absolute是一個能夠獨當一面的屬性，其使用可以不要relative，當然，也可以不使用z-index。在默認情況下，元素應用了非static的position屬性后，其就會有一個隱晦的層級，會居於普通元素之上，無需額外設置z-index屬性值。
然而，眼觀現實世界，z-index屬性值的濫用跟absolute屬性值的濫用有的一拼——只要用到絕對定位/相對定位的地方就要設置一個z-index值，以表示自己的地位。結果，N多個z-index之后，網站前端換人之后，頁面的z-index層級混亂了，為了讓新添加元素上面顯示，不惜設置z-index的值為999或是9999等。這就好比球隊，人人都想當老大，最后結果是個很有味道的屎。
轉自https://www.cnblogs.com/teamobaby/p/3840226.html