細說opacity和層疊上下文

上篇文章《CSS半透明效果的屬性和場景》最後提到了層疊上下文，在這篇文章中就說說opacity和層疊上下文。建議讀者在讀本篇文章以前，先仔細閱讀張鑫旭大神的《深刻理解CSS中的層疊上下文和層疊順序》，並本身動手實踐多種生成層疊上下文的方法。

• 探索一：使用opacity生成的層疊上下文會壓蓋基本元素。

以下圖所示，塊狀元素的opacity不爲1，造成了層疊上下文，不管行內元素在塊狀元素的前或後，都被塊狀元素壓蓋。

• 探索二：兩個經過opacity建立層疊上下文的元素，層疊順序是：出現順序靠後的元素在上面。

以下圖所示，具備相同或不一樣opacity的元素老是後出現的在上面。由此咱們能夠得知，opacity的改變不會改變層疊順序。

• 探索三：若兩個元素分別用z-index，opacity建立了層疊上下文，那麼如何判斷層疊順序？

其實每一個元素都有z-index，默認值爲auto，z-index爲0的效果等同於z-index爲auto的效果。咱們能夠把用opacity建立的層疊上下文的z-index看做auto，因此兩個層疊上下文，層疊順序由z-index決定，z-index較大的元素在上面，z-index相同（0==auto）則出現靠後的元素在上面。

• 探索四：不一樣的層疊上下文只能依靠z-index來肯定層疊順序？

筆者作了實驗，以下圖所示，分別爲block和inline元素使用opacity建立了層疊上下文，其層疊順序是後出現的元素在上面。因此說元素種類也不影響層疊順序。在測試其餘CSS3屬性是否能影響層疊順序以前，筆者猜測：只有經過修改z-index值才能改變不一樣層疊上下文的層疊順序。

順便說一句，z-index 僅能在定位元素上奏效，定位（position：relative/absolute/fixed）+z-index（不爲auto）能夠實現建立層疊上下文，父元素display:flex/inline-flex的元素可被建立了層疊上下文。不管是哪一種方式，層疊順序是：z-index更大的元素在上面，z-index相同，出現順序靠後的在上面。
下圖是relative+z-index的示例，不管z-index爲0的元素出現z-index爲1的元素的前或者後，都被z-index爲1的元素壓蓋，z-index都爲1的不一樣元素，老是後出現的在上面。在筆者的實驗中，保持這三個元素的z-index不變，將position改成absolute或者fixed，或者把三個元素的父盒子的display改成flex/inline-flex，層疊順序不變。

仔細一想，層疊上下文的概念仍是挺好理解的，比BFC和IFC都簡單一些。不過在使用起來，也容易踩坑。下次在設計頁面結構的時候，能提早注意到不一樣的層疊上下文，也就能避免一些問題了。