資訊專欄INFORMATION COLUMN
摘要：上篇文章半透明效果的屬性和場(chǎng)景最后提到了層疊上下文，在這篇文章中就說說和層疊上下文。探索一使用生成的層疊上下文會(huì)壓蓋基本元素。仔細(xì)一想，層疊上下文的概念還是挺好理解的，比和都簡單一些。
上篇文章《CSS半透明效果的屬性和場(chǎng)景》最后提到了層疊上下文，在這篇文章中就說說opacity和層疊上下文。建議讀者在讀本篇文章之前，先仔細(xì)閱讀張?chǎng)涡翊笊竦摹渡钊肜斫釩SS中的層疊上下文和層疊順序》，并自己動(dòng)手實(shí)踐多種生成層疊上下文的方法。
探索一：使用opacity生成的層疊上下文會(huì)壓蓋基本元素。
如下圖所示，塊狀元素的opacity不為1，形成了層疊上下文，無論行內(nèi)元素在塊狀元素的前或后，都被塊狀元素壓蓋。
探索二：兩個(gè)通過opacity創(chuàng)建層疊上下文的元素，層疊順序是：出現(xiàn)順序靠后的元素在上面。
如下圖所示，具有相同或不同opacity的元素總是后出現(xiàn)的在上面。由此我們可以得知，opacity的改變不會(huì)改變層疊順序。
探索三：若兩個(gè)元素分別用z-index，opacity創(chuàng)建了層疊上下文，那么如何判斷層疊順序？
其實(shí)每個(gè)元素都有z-index，默認(rèn)值為auto，z-index為0的效果等同于z-index為auto的效果。我們可以把用opacity創(chuàng)建的層疊上下文的z-index看作auto，所以兩個(gè)層疊上下文，層疊順序由z-index決定，z-index較大的元素在上面，z-index相同（0==auto）則出現(xiàn)靠后的元素在上面。
探索四：不同的層疊上下文只能依靠z-index來確定層疊順序？
筆者做了實(shí)驗(yàn)，如下圖所示，分別為block和inline元素使用opacity創(chuàng)建了層疊上下文，其層疊順序是后出現(xiàn)的元素在上面。所以說元素種類也不影響層疊順序。在測(cè)試其他CSS3屬性是否能影響層疊順序之前，筆者猜想：只有通過修改z-index值才能改變不同層疊上下文的層疊順序。
順便說一句，z-index 僅能在定位元素上奏效，定位（position：relative/absolute/fixed）+z-index（不為auto）可以實(shí)現(xiàn)創(chuàng)建層疊上下文，父元素display:flex/inline-flex的元素可被創(chuàng)建了層疊上下文。無論是哪種方式，層疊順序是：z-index更大的元素在上面，z-index相同，出現(xiàn)順序靠后的在上面。
下圖是relative+z-index的示例，無論z-index為0的元素出現(xiàn)z-index為1的元素的前或者后，都被z-index為1的元素壓蓋，z-index都為1的不同元素，總是后出現(xiàn)的在上面。在筆者的實(shí)驗(yàn)中，保持這三個(gè)元素的z-index不變，將position改為absolute或者fixed，或者把三個(gè)元素的父盒子的display改為flex/inline-flex，層疊順序不變。
仔細(xì)一想，層疊上下文的概念還是挺好理解的，比BFC和IFC都簡單一些。不過在使用起來，也容易踩坑。下次在設(shè)計(jì)頁面結(jié)構(gòu)的時(shí)候，能提前注意到不同的層疊上下文，也就能避免一些問題了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116622.html
摘要：在中與半透明效果相關(guān)的屬性有兩個(gè)和。屬性的值規(guī)定透明度。以及更早的版本支持替代的屬性。接下來通過場(chǎng)景來描述半透明效果的實(shí)現(xiàn)。圖片出現(xiàn)半透明效果，如果將文字設(shè)置為白色，文字的半透明效果會(huì)很小。 在CSS中與半透明效果相關(guān)的屬性有兩個(gè)：opacity和rgba。opacity屬性的值規(guī)定透明度。從 0.0 （完全透明）到 1.0（完全不透明）。設(shè)置opacity元素的所有后代元素會(huì)隨著一起...
摘要：深入淺出某區(qū)域內(nèi)有個(gè)浮層提示或者下拉菜單，于是可能需要遮住該區(qū)域之下的區(qū)域。很明顯，這是完全吻合標(biāo)準(zhǔn)對(duì)此的定義。需要注意的是，此時(shí)就算元素變成了定位元素，也不能改變其會(huì)創(chuàng)建新局部層疊上下文的命運(yùn)，因?yàn)樗O(shè)置了。 z-index的重要性 在我看來，z-index 給了我們?nèi)粘９ぷ髦幸詷O大的幫助，我們用它來定義元素的層疊級(jí)別（stack level）。受益于它，你能做Popup, Dro...
摘要：元素層疊順序補(bǔ)充說明位于最下面的特指層疊上下文元素后面會(huì)詳解的邊框和背景色。界中可能有其他的層疊結(jié)界，而自身也可能處于其他層疊結(jié)界中。 上一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 《CSS世界》這本書還剩六章，但是這本書的精華部分主要是前面的內(nèi)容，這里僅把后面章節(jié)相對(duì)重要的內(nèi)容以博客展示，想著了解更多的小伙伴還是去閱讀原文的好，畢竟三百多頁的一本書并不是小小幾篇博客能完全說...
摘要：但該盒不建立新的層疊上下文，除非是根元素。以上是基于的層疊上下文介紹。同級(jí)情況下，按照二者在源代碼中的順序，居后的又重新占領(lǐng)高地了?，F(xiàn)在我們看以下源代碼這個(gè)時(shí)候，以視口為包含塊進(jìn)行定位和大小計(jì)算，將會(huì)鋪滿整個(gè)屏幕。 前言：關(guān)于層疊上下文，筆者還沒有去閱讀更詳細(xì)的 W3C 規(guī)范來了解更本質(zhì)的原理（表打我，等我校招拿到 offer 了我就讀好伐 T_T）。一直聽說 CSS3 里的層疊上下文...
摘要：后來居上當(dāng)元素的層疊水平一致層疊順序相同的時(shí)候，在流中處于后面的元素會(huì)覆蓋前面的元素。相關(guān)連接深入理解中的層疊上下文和層疊順序?qū)盈B順序探究分層的顯示 什么是層疊上下文（stacking context） 可以理解為一個(gè)dom節(jié)點(diǎn)在Z軸高人一等，特性類似于BFC，即層疊上下文的內(nèi)部子元素再怎么翻江倒海，翻云覆雨都不會(huì)影響外部的元素。 CSS2創(chuàng)建層疊上下文的兩種方法（參考MDN） 根元...
閱讀 1618·2023-04-26 02:43
閱讀 3039·2021-11-11 16:54
閱讀 1361·2021-09-23 11:54
閱讀 1180·2021-09-23 11:22
閱讀 2371·2021-08-23 09:45
閱讀 854·2019-08-30 15:54
閱讀 3106·2019-08-30 15:53
閱讀 3196·2019-08-30 15:53
