層疊上下文

時間 2019-12-07

標籤層疊上下文简体版

原文原文鏈接

本文是我學習層疊上下文的總結。主要從如下途徑學習：
MDN： https://developer.mozilla.org...
張鑫旭大大的博文：http://www.zhangxinxu.com/wor...css

層疊順序

層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到inline-block的層疊順序與圖中inline box是一個level的；z-index:auto實際上和z-index:0單純從層疊水平上看，能夠認爲是同一level（二者在層疊上下文領域有着根本性的差別）。（如要看完整圖片請移步到張鑫旭大大博文）html

層疊準則

根據上圖，層疊水平越大，就顯示在越上面。web
當層疊水平同樣時，在DOM中位置越後，就顯示在越上面。ide

層疊上下文的特性

層疊上下文的層疊水平比普通元素高；wordpress
層疊上下文能夠嵌套，內部層疊上下文及其全部子元素都受限於外部的層疊上下文；學習
層疊上下文和兄弟元素獨立，只須要考慮後代元素；flex
每一個層疊上下文是自包含的：當元素的內容發生層疊後，整個該元素將會在父層疊上下文中按順序進行層疊。ui

層疊上下文建立的條件

html元素spa
z-index的值不爲auto的相對/絕對定位元素.net
position: fixed的元素
應用了某些CSS3的元素
- z-index的值不爲auto的flex項（即父元素display: flex | inline-flex）
- opacity小於1的元素
- transform值不爲none元素
- min-blend-mode值不爲none的元素
- filter值不爲none的元素
- perspective值不爲none的元素
- isloation值爲isolate的元素
- will-change指定了任意屬性
- -webkit-overflow-scrolling值爲touch的元素

demo

先放MDN的例子的效果圖（點擊查看代碼與效果）

下面是我本身寫的一些demo，主要與z-index屬性相關。

demo通用HTML代碼

<div class="outter">outter
      <div class="inner">inner</div>
    </div>

基礎CSS（沒有建立層疊上下文）。全部demo都是在這份CSS的基礎上寫出來的。

.outter {
        width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的position值爲relative或absolute，而且不設置z-index值或者z-index值爲auto時，outter沒有建立層疊上下文。此時根據層疊順序表，負的z-index元素在block元素下面，因此，inner被outter覆蓋了。
查看demo

相對/絕對定位

.outter {
      position: relative;z-index: auto;
      
      width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

雖然outter的position值設置爲absolute或者relative，但z-index值設置爲auto，此時，outter並無建立層疊上下文，因此，效果與基礎demo一致。
查看demo

.outter {
      position: relative;z-index: 0;
      
      width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的z-index值設置爲數值，甚至爲0時，outter會建立層疊上下文，此時inner會覆蓋outter。
查看demo

position: fixed的元素

.outter {
      position: fixed;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的position值設置爲fixed時，outter會建立層疊上下文，此時inner會覆蓋outter。
查看demo

opacity小於1的元素

.outter {
      opacity: .5;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的opacity值設置小於1時，outter會建立層疊上下文，此時inner會覆蓋outter。
查看demo

transform值不爲none元素

.outter {
      transform: rotate(15deg);
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的opacity值設置不爲none時，outter會建立層疊上下文，此時inner會覆蓋outter。
查看demo

will-change指定了任意屬性

.outter {
      will-change: transform; 
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的will-change值設置爲任何值時，outter會建立層疊上下文，此時inner會覆蓋outter。
查看demo

z-index的值不爲auto的flex項（即父元素display: flex | inline-flex）

此處的HTML結構有點不一樣。

<div class="box">
  <div class="outter">outter
    <div class="inner">inner</div>
  </div>
</div>

.box {
      display: flex;
    }
    .outter {
      z-index: 1;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

在原來的HTML外層加一個class爲box的div，並設置display值爲flex或者inline-flex，此時outter爲flex項，會建立層疊上下文，此時inner會覆蓋outter。
查看demo

其餘
因爲暫時對mix-blend-mode、filter、isolation、-webkit-overflow-scrolling屬性瞭解很少，因此沒有作demo。若是想看demo效果，能夠看張鑫旭大大的博文。