作為一個假的前端，在除錯一個頁面時出現瞭如下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。