資訊專欄INFORMATION COLUMN
摘要：上篇文章半透明效果的屬性和場景最后提到了層疊上下文，在這篇文章中就說說和層疊上下文。探索一使用生成的層疊上下文會壓蓋基本元素。仔細一想，層疊上下文的概念還是挺好理解的，比和都簡單一些。
上篇文章《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都簡單一些。不過在使用起來，也容易踩坑。下次在設計頁面結構的時候，能提前注意到不同的層疊上下文，也就能避免一些問題了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116622.html
摘要：在中與半透明效果相關的屬性有兩個和。屬性的值規定透明度。以及更早的版本支持替代的屬性。接下來通過場景來描述半透明效果的實現。圖片出現半透明效果，如果將文字設置為白色，文字的半透明效果會很小。 在CSS中與半透明效果相關的屬性有兩個：opacity和rgba。opacity屬性的值規定透明度。從 0.0 （完全透明）到 1.0（完全不透明）。設置opacity元素的所有后代元素會隨著一起...
摘要：深入淺出某區域內有個浮層提示或者下拉菜單，于是可能需要遮住該區域之下的區域。很明顯，這是完全吻合標準對此的定義。需要注意的是，此時就算元素變成了定位元素，也不能改變其會創建新局部層疊上下文的命運，因為他設置了。 z-index的重要性 在我看來，z-index 給了我們日常工作中以極大的幫助，我們用它來定義元素的層疊級別（stack level）。受益于它，你能做Popup, Dro...
摘要：元素層疊順序補充說明位于最下面的特指層疊上下文元素后面會詳解的邊框和背景色。界中可能有其他的層疊結界，而自身也可能處于其他層疊結界中。 上一篇：《CSS世界》筆記四：流的保護與破壞 寫在前面 《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內容，這里僅把后面章節相對重要的內容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說...
摘要：但該盒不建立新的層疊上下文，除非是根元素。以上是基于的層疊上下文介紹。同級情況下，按照二者在源代碼中的順序，居后的又重新占領高地了。現在我們看以下源代碼這個時候，以視口為包含塊進行定位和大小計算，將會鋪滿整個屏幕。 前言：關于層疊上下文，筆者還沒有去閱讀更詳細的 W3C 規范來了解更本質的原理（表打我，等我校招拿到 offer 了我就讀好伐 T_T）。一直聽說 CSS3 里的層疊上下文...
摘要：后來居上當元素的層疊水平一致層疊順序相同的時候，在流中處于后面的元素會覆蓋前面的元素。相關連接深入理解中的層疊上下文和層疊順序層疊順序探究分層的顯示 什么是層疊上下文（stacking context） 可以理解為一個dom節點在Z軸高人一等，特性類似于BFC，即層疊上下文的內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。 CSS2創建層疊上下文的兩種方法（參考MDN） 根元...
閱讀 1614·2023-04-26 02:43
閱讀 3028·2021-11-11 16:54
閱讀 1355·2021-09-23 11:54
閱讀 1174·2021-09-23 11:22
閱讀 2369·2021-08-23 09:45
閱讀 854·2019-08-30 15:54
閱讀 3103·2019-08-30 15:53
閱讀 3192·2019-08-30 15:53
