CSS進階（16）—— CSS世界的層疊規則（下）

上一章咱們主要了解了層疊上下文，層疊水平，CSS層疊領域的兩大黃金法則等概念，本章咱們講繼續深刻探索CSS世界的層疊規則。

1.深刻理解層疊上下文

「層疊上下文」的元素有以下的一些特性：

（1）默認層疊水平(z-index:auto)比普通元素要高

（2）能夠阻斷元素的混合模式

（3）能夠嵌套，內部全部（層疊上下文及其全部普通子）元素均受制於外部的「層疊上下文」

（4）每一個「層疊上下文」的元素和兄弟元素相互獨立，也就是說，當進行層疊變化或渲染的時候，只須要考慮後代元素

（5）每一個「層疊上下文」的元素是自成體系的，當元素髮生層疊的時候，整個元素被認爲是在父層疊上下文的層疊順序中（這點我的認爲跟第二點表達的意思相似）

上一章咱們講了定位屬性能夠幫助建立「層疊上下文」，那麼除了定位屬性外還有哪些CSS屬性或元素元素擁有層疊上下文呢？

（1）根層疊上下文

根元素默認擁有層疊上下文，這可能跟頁面中若是沒有定位元素的話，默認會定位到根元素是一個道理，咱們能夠近似認爲根元素的position默認值爲relative，這也就很好的解釋了，爲何頁面中全部元素至少處於一個「層疊結界」中。

（2）傳統層疊上下文（z-index不爲auto且生效）

在使用z-index屬性的時候，咱們須要注意該屬性只能和某些CSS屬性搭配使用纔會生效，在CSS2.1的世界中，咱們只須要注意z-index須要搭配定位元素使用便可，然而在CSS3中，還有一些其餘屬性也支持生成層疊上下文結界，等下我會列出這些屬性。在上一章節中，我測試並驗證了：z-index正值>z-index:0約等於z-index:auto>z-index負值。爲何我要說z-index:0約等於z-index:auto。二者的根本區別就在因而否會建立層疊上下文。z-index:auto是定位元素的默認屬性，該元素依舊是一個普通元素，而z-index:0是一個顯示聲明，在生效的狀況下會給當前元素建立層疊上下文，這二者在"層級別"的角度上講是同樣的，也就是他們的層疊水平相同（同級元素比較），但建立層疊上下文後會對內部元素產生較大的影響。乾巴巴的說了一大堆仍是不明白？咱們用測試驗證一下上面的說法。

來看下面兩段代碼產生的不一樣結果：

<div style="position:relative; z-index:auto;">
    <!-- 美女 -->
    <img src="1.jpg" style="position:absolute; z-index:2;">  
</div>
<div style="position:relative; z-index:auto;">
    <!-- 美景 -->
    <img src="2.jpg" style="position:relative; z-index:1;">  
</div>
 
<div style="position:relative; z-index:0;">
    <!-- 美女 -->
    <img src="1.jpg" style="position:absolute; z-index:2;">  
</div>
<div style="position:relative; z-index:0;">
    <!-- 美景 -->
    <img src="2.jpg" style="position:relative; z-index:1;">  
</div>
複製代碼

兩段代碼產生了徹底不一樣的結果。當z-index:auto生效的時候，兩張圖片的父容器均爲普通定位元素，所以圖片的z-index的參照物是最近的「層疊結界」（多是根層疊上下文），因爲美女圖的z-index>風景圖的，所以遵循"誰大誰上"原則。而當z-index:0生效的時候，兩張圖片的父容器均建立了層疊上下文，父容器在層疊水平上是同級的（均爲z-index:0），所以遵循"後來居上"原則，此時內部的z-index屬於胳膊肘擰不過大腿的狀態，看起來就「失效了」。

（3）CSS3中的層疊上下文

剛纔提到了，CSS3中新增了一些能夠直接建立層疊上下文的屬性，在這裏我標出我認爲比較搞的屬性，並羅列其餘屬性。CSS3的內容本章很少作展開，恕我直言，我也不會。

• z-index值不爲auto的flex項(父元素display:flex|inline-flex).
• 元素的opacity值不是1.
• 元素的transform值不是none.
• 元素mix-blend-mode值不是normal.
• 元素的filter值不是none.
• 元素的isolation值是isolate.
• will-change指定的屬性值爲上面任意一個。
• 元素的-webkit-overflow-scrolling設爲touch.

這裏我單獨拿出第二條說明一下，注意這裏的說明是opacity不是1，在咱們作顏色漸變的特效的時候，每每元素的初始狀態是opacity爲1，過渡到一個<1的值，然而這個變化會會使得元素的層級有意想不到的狀況發生，所以須要注意在作透明度過分的時候儘可能設置元素自己的opacity爲0.99這樣的近似值。

（4）層疊上下文與層疊順序

上一章我在講層疊順序的時候給出了這樣一張圖，這裏咱們須要注意的是，只要能生成z-index:auto的CSS屬性，就有可能會影響層疊順序，除了比較好記的定位元素外，咱們還須要注意CSS3新增的一些屬性，尤爲是我剛纔提到的opacity不爲1的屬性，只要能讓z-index:auto屬性生效的元素，就會提高自身元素的層級，這是一個注意點，單獨講一下加深印象。

2.z-index負值理解與使用

z-index是支持負值的，在z-index負值生效的時候，該元素的層級在當前層疊上下文中僅比backgroud/border等裝飾品的層級高一級，能夠認爲是「最低」的。一般咱們須要某個元素部分隱藏的時候能夠用到z-index：負值。在使用z-index的負值屬性的時候，須要注意一個點，z-index屬性會去找第一個層疊上下文元素做爲層疊結界，所以咱們在使用的時候要至關注意當前z-index生效的元素的層疊結界是誰。能夠說，沒有明確層疊結界的z-index都是耍流氓。（我說的明確不是瀏覽器明確，而是你本身要知道層疊結界在哪裏，瀏覽器可不會犯糊塗）咱們經過一個例子加深一下印象：

<!-- z-index負值 -->
<div class="box">
    <div class="content">我被隱藏了</div>
</div>
<style> .box{ width: 200px; height: 200px; background: rgb(255,255,0); } .content{ width: 300px; height: 300px; background: rgb(0,255,255); position: relative; z-index: -1; } </style>
複製代碼

能夠看到文字不見了，content元素的被box遮擋了一部份內容，這是由於二者的默認層疊結界都是根層疊結界，所以content的層級要比box的低，就被覆蓋了。若是咱們給box加上一個層疊結界呢？

<!-- z-index負值 -->
<div class="box">
    <div class="content">我被隱藏了</div>
</div>
<style> .box{ width: 200px; height: 200px; background: rgb(255,255,0); position: relative; z-index: 0; } .content{ width: 300px; height: 300px; background: rgb(0,255,255); position: relative; z-index: -1; } </style>
複製代碼

能夠看到結果已經徹底不一樣了，此時content的z-index:-1找到了第一個層疊結界是box元素，所以無論z-index有多大的負值，都不可能超過這個結界，咱們能夠看到，content元素覆蓋了box的背景色。

利用z-index負值能夠隱藏元素的特性，咱們能夠完成可訪問性隱藏，只須要層疊上下文內某一個父元素加個不透明的背景色就能夠了，他與clip相比的優點是無需絕對定位，而他的不足之處就是不具備廣泛適用性，須要其餘元素配合進行隱藏，說白了，就是維護成本高了，別人不知道你爲何這樣作。

本章關於z-index的內容就到這兒了，這裏作個總結。

（1）任何元素都擁有本身的層疊規則，要找到某一元素在z軸上的位置，就要先找他的層疊結界。

（2）記住「誰大誰上」，「後來居上」的黃金法則。

（3）遇到元素隱藏問題，不放檢查下層疊結界的設置是否合理。

下一章的內容是CSS強大的文本處理能力，感興趣的同窗能夠點個關注。

不忘初心，方得始終

喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣（708637831）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。