1. z-index只有在設置了position為relative,absolute,fixed時才會有效。
2. z-index的“從父原則”。當你發現把z-index設的多大都沒用時，看看其父元素是否設置了有效的z-index，當然別忘了先看看自身是否設置了position。
作為一個假的前端，在調試一個頁面時出現了如下bug。
左側的菜單固定為fixed時，二級菜單無法設置有效的z-index，導致菜單隱藏在頁面元素之下，明明頁面元素的z-index是1，但是無論把菜單的z-index設置為多大，都不管用。
查閱了資料，原來谷歌瀏覽器在設置position:fixed;后會觸發元素創建一個新的層疊上下文，並且當成一個整體在父層疊上下文中進行比較。如上面的dom結構，當給b設置了position:fixed;屬性后，會觸發創建一個新的層疊上下文，它的父層疊上下文變成了a，所以b只能在a的內部進行層疊比較。這也就是大家熟聽的“從父原則”。
所以本來所有元素都在root內比較，改為fixed之后只能在父級元素內比較，而父級元素沒有設置z-index，所以無法比較。
所以解決方案是給父級元素設置z-index，一般設置為0就可以了。
摘抄兩點：
1. z-index只有在設置了position為relative,absolute,fixed時才會有效。
2. z-index的“從父原則”。當你發現把z-index設的多大都沒用時，看看其父元素是否設置了有效的z-index，當然別忘了先看看自身是否設置了position。