當fixed元素相互嵌套時，父元素會影響子元素的層疊關系，最好不要嵌套使用fixed

問題：fixed元素被另一個fixed元素包含的時候在chrome下fixed子元素的定位會受到父元素的影響。

解釋：層疊關系是受層疊上下文影響的。文檔中的層疊上下文由滿足以下任意一個條件的元素形成：

• 根元素 (HTML),
• 絕對（absolute）定位或相對（relative）定位且z-index值不為"auto",
• 元素的opacity屬性值小於1. (參考 the specification for opacity),
• 在mobile WebKit 和 Chrome 22+內核的瀏覽器中, position: fixed 總是創建一個新的層疊上下文, 即使z-index的值是"auto" (See this post)

　　每個層疊上下文都有如下的層疊級別組成（顯示順序從后到前）：

1. 父級層疊上下文的背景和邊框；
2. 層疊級別為負值的層疊上下文（越小越在下）；
3. 非行內、非定位的子元素；
4. 非定位的浮動子元素和它們的內容；
5. 行內非定位子元素；
6. 'z-index:auto' 的定位子元素，和任何 'z-index:0' 的層級上下文；
7. 層疊級別為正值的層疊上下文（越大越在上）。

結論：在chrome22+的瀏覽器中，position為fixed總是會創建新的重疊上下文，所以子fixed元素在此時會以父fixed元素為層疊上下文，子元素的層疊關系會受到父元素的影響。而在非chrome瀏覽器下子fixed元素並不會創建新的層疊上下文，fixed元素的層疊上下文為最近的層疊上下文。 因此，我們應該盡量避免出現fixed元素相互嵌套的問題。如果必須有嵌套的情況，建議修改fixed父元素的z-index值來修正在chrome下fixed子元素的層疊問題。

對於opacity小於1的元素也會產生層疊上下文的問題，可能很多人都不知道。但是規范里面是明文規定的：

• opacity值小於1的元素會創建新的層疊上下文
• opacity值小於1的元素的層疊級別相當於z-index:0的定位元素。此時設置z-index會失效，除非該元素同時為定位元素
• opacity值小於1的元素如果同時為定位元素時，則該元素將同時具有定位元素和opacity小於1元素的特性之和。換句話說，就是z-index等於“auto”時會被當成z-index等於“0”時創建新的層疊上下文