網頁切版的時候偶爾會需要設定圖層的優先順序，
可是我常常是設定完z-index卻還是起不了作用，
後來找到了這個健康四步驟，
覺得太好用了所以絕對要記錄下來：（以下轉自這裡）




在實際開發中，div+css經常會碰到層級的問題
其中有個很頭痛的就是z-index控制層級時，老是發現z-index不起作用
作者依據自己的經驗，總結出以下步驟：
1、判斷被覆蓋的層（想要置頂的層）的position是否也為relative或者absolute
2、如果1成立，則判斷是否此層的z-index比誤覆蓋的層的z-index數值大
3、如果2成立，判斷是否此層的父級元素比誤覆蓋的層的z-index數值大
4、如果3成立，判斷是否此層的父級元素比誤覆蓋的層的父級層的z-index數值大
到此為止，99%的該問題會得到解決！
內容不多，可是會非常實用！



我本來找了一堆國內外的資料，
找到這裡來的時候一開始也想說這幾行字是怎麼可能會解決問題，
結果發現超好用啊！！！成功解決我的問題
且對於z-index的問題來說幾乎可以有效解決的裱框等級！
所以私心的自己記錄一下好了～



另外要注意的是，
通常z-index會不起作用的原因除了忘了設定position以外，
也是因為包在最外層的div設定的問題，
可以參考我做的這個示意：

橘色都設定z-index:100了，還是被z-index:10的藍綠色壓到的原因，
正是因為z-index順序是先被兩個物件最外層的紅色數值給影響
（2 > 1，所以z-index:2的紅色不管裡面藍綠色設定多少，都會在z-index:1的紅色之上），
這時有兩個方式：




1.最外層的紅色皆不設定z-index


2.把z-index:1的數值改為2以上，比另一個紅色的z-index大（例如：3）





這樣是不是就看懂啦！