CSS z-index 探讨

一、背景

你有没有在项目代码中遇到这样一种情况，由于代码是小组协同开发，每个人所写的部分都不一样，但是会组合到一起。而每个人的CSS中的样式也是肯定不一样的，那么对于定位元素，层叠顺序可能会影响一个组件在页面中的显示情况。于是大家都会设定z-index来使自己写的小组件一定是在某种情况下可展示的，但是自己无论怎样调整z-index的值都无法达到效果。也就是说，虽然我们把当前的某一个元素的z-index设为了9999999...，但还是无法达到我们的效果，那么我们就进入了一个误区。

比如以下demo：

.stacking-context1 {
    height: 200px;
    width: 100%;
    background-color: green;
    position: absolute;
    z-index: 1;
}
.stacking-context2 {
    height: 100px;
    width: 100%;
    background-color: blue;
    position: absolute;
    z-index: 999;
}
.stacking-context3 {
    height: 200px;
    width: 100%;
    background-color: pink;
    position: absolute;
    z-index: 2;
}

<div class="stacking-context1">
        z-index: 1
        <div class="stacking-context2">z-index: 999</div>
</div>
<div class="stacking-context3">z-index: 2</div>

按照我们的预想，现在的堆叠顺序应该为：

z-index-test1

实际为：

z-index-test2

那为何会出现这种情况呢？

二、探讨

當我們有一個 <div id="parent"> 包著一群 <div class="child"> 元素時，它們的堆疊順序通常會一起被移動(從父原則)，這整個群組的順序就是 stacking context，要完全理解 stacking context 我們就必須要參透 z-index 是怎麼排序 stacking order。
每一個 stacking context 有一個唯一的 HTML 元素當作其根元素，當一個新的 stacking context 或者我們翻作堆疊環境被建立在一個元素上時，這個堆疊環境就會控管它內部的子元素的順序 stacking order，意思是如果其中一個元素在這個堆疊環境中順序被排在最底下，那它就完全沒機會出現在另外一個元素排位較高的堆疊環境前面，就算他的 z-index 設成 9999999。
從另外一個角度來說，每一個被設定 position 的元素除了自己的 stacking order 另外如果內部還有子元素，就會有一個 stacking context 來管制底下的元素。
要建立一個堆疊環境 stacking context有下面三者方式，只要使用其一即可：
1.當元素是網頁文件的根元素通常就是 <html>
2.當元素被設定 position 除了 static 以外的值，然後 z-index 設定為除了 auto 以外的值
3.當元素設定了 opacity 且值小於 1
上面提到的三種方式中，前兩者大部分的開發者都知道，即使他們不懂原理但還是會使用。第三種方式除了 w3c 規範，大多開發者都不曾提到。
此外除了 opacity 另外一些新的屬性像是 transforms, filters, css-regions, paged media 等等都會產生 stacking context。
還有當 css 屬性需要在超出螢幕的地方渲染，他也會產生一個 stacking context。
来源：https://andyyou.github.io/2016/03/03/z-index/

如何決定元素在堆叠环境中的位置？

在单一的堆叠环境从最下面(后)到上面(前)规则如下

执行堆叠的根元素。
有设定 position 且 z-index 为负数的元素和它们的子元素，-1 在 -2 前面。
沒有设定 position 的元素，一般元素。
有设定 position 且 z-index 为 auto，設定 opacity 小于 1 和其他 transforms 等属性也在此列。
有设定 position 且 z-index 为正数。
都一样的时候就比文件中代码出现的先后顺序，后出现的出现在上面。

因此，当我们的某个元素已经创建了“堆叠上下文环境”（stacking contetxt），那么它里面的元素再怎么设置z-index也不可能影响它的父元素所在的堆叠上下文环境中的顺序，也就是说他只能在他的按顺序已创建了堆叠上下文环境的元素中进行比较，而他的父元素的堆叠顺序决定了他在父元素所处环境中的位置。
也就是说当我们把z-index设得很大却无济于事的时候，很可能该元素的上层元素已经具备stacking context了。

所以，为了达到我们在demo中想要的效果其实很简单，只要把stacking-context1的z-index改为3就行了。

.stacking-context1 {
    height: 200px;
    width: 100%;
    background-color: green;
    position: absolute;
    z-index: 3;
}
.stacking-context2 {
    height: 100px;
    width: 100%;
    background-color: blue;
    position: absolute;
    z-index: 999;
}
.stacking-context3 {
    height: 200px;
    width: 100%;
    background-color: pink;
    position: absolute;
    z-index: 2;
}

<div class="stacking-context1">
        z-index: 1
        <div class="stacking-context2">z-index: 999</div>
</div>
<div class="stacking-context3">z-index: 2</div>