摘要：層疊上下文元素的特性層疊上下文的層疊水平要比普通元素高層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的層疊上下文。層疊上下文特性里最后一條規則，每個層疊上下文都是獨立的。

z-index基礎介紹：
三維坐標空間里，x軸通常用來表示水平位置，y軸來表示垂直位置，還有z軸來表示在紙面內外方向上的位置，像下面的圖片一樣：

css允許的z-index的值是
● auto (自動，默認值)
● (整數)
● inherit (繼承)
當設置成整數時，值越大越靠近用戶。
如果有兩個元素放在了一起，占據了一塊共同的區域，那么有著較大z-index值的元素就會掩蓋有著較低z-index值的元素在共同區域的那一部分。

關于z-index的三個思考
● 當一個設置了z-index值的定位元素與正常的文檔流中的元素相互重疊的時候，誰會被置于上方？
● 當定位元素與浮動元素相互重疊的時候，誰會被置于上方？
● z-index必須要與定位一起使用才會生效嗎？
● z-index大的元素一定會遮擋z-index小的元素嗎？
解決上面的問題需要深入理解z-index的原理，需要知道層疊上下文和層疊順序。

層疊上下文的概念：
層疊上下文就是html中的一個三維概念。相當于在水平面創建了一個z軸，有了層疊上下文的元素會離用戶更近。它包含了一組層疊層的元素。我們所創建的每一個網頁都有一個默認的層疊上下文，層疊上下文的根就是html，其他的所有元素都會在這個層疊上下文占據一個層疊水平，或高或低。

層疊順序：
層疊順序：這是一種規則，表示元素發生重疊時，在z軸上的顯示順序。
在一個層疊上下文中，有七種層疊順序:

(1) 背景和邊框：建立層疊上下文的元素的背景和邊框，層疊中的最低級別
(2) 負的z-index：z-index 為負值時形成的層疊上下文
(3) 塊級盒子： 文檔流中正常的塊級元素
(4) 浮動盒子：非定位的浮動盒子
(5) 行內盒：文檔流內的行內級盒子
(6) z-index：0 定位元素，這些元素建立了新的層疊上下文。
(7) 正的z-index：層疊中的最高級別。

頁面中內聯元素的層疊順序要比浮動元素和塊狀元素都高的原因，浮動和塊級盒子主要用來布局，而內聯的元素用來顯示頁面內容。所以比起他的要高。

ps: 圖上缺少的信息
inline和inline-block是一個同一個level
z-index:0實際上和z-index:auto單純從層疊水平上看，是可以看成是一樣的。

層疊順序規則
誰大誰上：當具有明顯的層疊水平標示的時候，比如說z-index值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個
后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。

層疊上下文元素的特性
● 層疊上下文的層疊水平要比普通元素高；
● 層疊上下文可以嵌套，內部層疊上下文及其所有子元素均受制于外部的層疊上下文。
● 每個層疊上下文不會影響它的兄弟元素，當進行層疊變化或渲染的時，只和該元素的后代元素有關。
● 每個層疊上下文是獨立的，當元素發生層疊的時，它的層疊順序依賴在父層疊上下文的層疊順序中。

層疊上下文的創建
（1）根層疊上下文：
指的是頁面根元素，也就是html元素。這就是為什么，絕對定位元素在left/top等值定位的時候，如果沒有其他定位元素影響，會相對瀏覽器窗口定位的原因。
（2）定位元素
含有position的值是relative或absolute的定位元素，以及FireFox/IE瀏覽器（Chrome等webkit內核瀏覽器是fixed的自動形成層疊上下文，無需將z-index設置成數值）下含有position:fixed的定位元素，當其z-index值不是auto的時候，會創建層疊上下文。
demo:
（1）

結果：

（2）

結果：

原因：
z-index 值是auto,是一個普通元素，兩個img層比較不受父級的影響，按照規則誰大誰上，于是，z-index為2的貓覆蓋值為1的狗
z-index:0會創建一個層疊上下文。此時，層疊規則就發生了變化。層疊上下文特性里最后一條規則，每個層疊上下文都是獨立的。兩個img的層疊順序比較變成了優先比較其父級層疊上下文元素的層疊順序。由于兩者都是z-index:0，一樣大，此時，遵循層疊規則后來居上，根據在DOM出現的先后順序決定誰在上面，于是，位于后面的狗覆蓋貓。此時img元素上的z-index是沒有任何意義的。

E6/IE7瀏覽器有個bug，就是z-index:auto的定位元素也會創建層疊上下文。

（3） CSS3下的層疊上下文
CSS3的一些新屬性，會創建局部的層疊上下文，并且transform屬性會改變絕對定位的字元素的包含塊。
以下幾種情況會產生新的層疊上下文：
1.z-index值不為auto的flex項(父元素display:flex|inline-flex).
2.元素的opacity值不是1.
3.元素的transform值不是none.
4.元素mix-blend-mode值不是normal.
5.元素的filter值不是none.
6.元素的isolation值是isolate.
7.will-change指定的屬性值為上面任意一個。
8.元素的-webkit-overflow-scrolling設為touch.

display:flex|inline-flex與層疊上下文
需要滿足兩個條件才能形成層疊上下文：
(1) 父級需要是display:flex/inline-flex
(2) 子元素的z-index不是auto，必須是數值。
此時，這個子元素為層疊上下文元素，沒錯，注意了，是子元素，不是flex父級元素
demo:

 

    

        
    


.box div {
    width: 300px;
    height: 300px;
    background-color: pink;
    z-index: 101;
}
.box div img {
    width: 400px;
    height: 200px;
    position: relative;
    z-index: -1;
}

結果：

原因：此時的div是一個普通的元素，它上面設置的z-index是無效的，img的負值z-index會被塊級元素所遮擋。

接上：

.box {
    display: flex;
}

結果：

div加上flex值之后，此時的z-index就會生效，會使它的子元素既內部的div形成層疊上下文。根據7層的層疊順序，background的那層會被負的z-index的那層所遮擋。
flex的出現打破了傳統的z-index必須與定位的元素一起使用才會生效的觀念。

opacity與層疊上下文

    


div {
    width: 300px;
    height: 300px;
    background-color: pink;
}
div img {
    width: 400px;
    height: 200px;
    position: relative;
    z-index: -1;
}

結果：

給div加一個opacity的屬性：

div {
    width: 300px;
    height: 300px;
    background-color: pink;
    opacity: 0.5; /* 添加opcity屬性 */
}

只要設置的opacity的值不是1，就會形成層疊上下文。
表現結果：

transform對層疊上下文的影響
同上，對外層的div設置transform: rotate(15deg)，會形成層疊上下文，導致圖片顯示在div的上面。

transform除了建立局部的層疊上下文還會改變絕對定位（固定定位也是絕對定位的一種）子元素的包含塊，
包含塊的概念：一些盒子根據它外面的矩形盒子計算得到自身的定位和大小，這個外層的矩形盒子就是包含塊。

對固定定位的元素的影響：
正常的固定定位的包含塊是視口，加了transform就不一樣了

    


    
div {
    width: 100px;
    height: 100px;
}
#fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
}
#transform {
    background: red;
    padding: 20px;
}

fixed將會鋪滿整個屏幕。
結果：

上面加上

#transform {
    transform: scale(1);
}

結果：

原因，fixed的包含塊不再是視口，而是transform這個div最邊緣。所以fixed的寬高均為140px

對絕對定位的元素的影響：

    

        

    


#relative {
    position: relative;
    width: 100px;
    height: 100px;
    background: green;
}
#absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
}
#transform {
    background: red;
    width: 50px;
    height: 50px;
}

此時absolute的包含塊為relative的內邊距盒的邊緣盒。所以absolute的寬高是100px
給transform div加上transform屬性

結果：

由于transform創建了局部層疊上下文，absolute的包含塊不再是 relative而是transform了，根據這一新的包含塊，得新寬和高為50px。
只要是有了transform這個屬性不論它的值是什么都會影響絕對定位的子包含塊。

總結 ：
層疊上下文的元素的層疊順序在哪一層：
依賴z-index值的元素，根據z-index的值來決定。
不依賴z-index的值的元素，它們的z-index的auto值相當于z-index:0級別。

第二種情況解釋了為什么定位的元素會覆蓋掉普通流中的元素。定位的元素，會默認加上z-index: auto，按照7種層疊順序，會遮蓋普通流的元素。

當z-index的值同是auto，就是說層疊上下文的元素和定位的元素處于同一個層疊順序時，當她們發生重疊時，后面的元素會遮蓋上面的元素：

上面的元素調換位置：

z-index本質上還是誰大誰在上面，雖然css3新加的一些屬性使z-index變的復雜，最常見的影響可能就是flex布局導致的，但是規則還是按照7種層疊順序來排布。