css-层叠上下文与z-index

z-index决定层叠关系吗

众所周知，css会有一个z轴的存在，也就是同一个区域的元素是一个叠加在另外一个上面的。而css中也有一个熟悉：z-index，所以很多人简单的认为，css的层叠关系第一个是先来后到，即后面元素的会覆盖前面的，而改变这个默认顺序，只需要设置z-index就好了。
那么是否这样简单呢，做一个简单实验：




    
    
    
    Document

按照之前的理解，由z-index来决定层叠关系，layer2虽然在layer1的后面，但layer2的z-index大，所以红色的应该在上面，但实际效果确实layer2的在上面：

layer2在上面

很多人开发的时候看到元素被覆盖，不由分说的先设置z-index，甚至z-index设置为很大的值，发现并没有效果。

层叠上下文

先解决上面为什么覆盖不了的问题，我们将layer1加上position: relative; 即：

   .layer1 {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        z-index: 2;
   }

放到浏览器上实验，可以看到layer1覆盖了layer2，那这是为什么呢，这里涉及到css的一个概念：层叠上下文。
层叠上下文，简单的理解，就是元素所在的一个牢笼。如果创建了这个牢笼，那它本身和它的子元素都处于这个牢笼下。

如何创建层叠上下文

先来看如何创建这个牢笼：

根元素 (HTML),
z-index 值不为 "auto"的绝对/相对定位，
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
opacity 属性值小于 1 的元素（参考 the specification for opacity），
transform 属性值不为 "none"的元素，
mix-blend-mode 属性值不为 "normal"的元素，
filter值不为“none”的元素，
perspective值不为“none”的元素，
isolation 属性被设置为 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文章）
-webkit-overflow-scrolling 属性被设置 "touch"的元素

看起来比较麻烦，日常就主要记住定位不是static，或者opacity不为1都会创建一个层叠上下文。我们刚刚给layer1设置了定位是relative就算创建了一个层叠上下文。
而所有的html元素都处于同一个html根层叠上下文中的，也就是说layer1和layer2的都在一个牢笼中，设置z-index是没有效果的，因为z-index属性只和定位元素（position不为static的元素）在一起的时候才有作用。
这时候，想要打破按顺序层叠的上下关系，就必须再创建一个新的层叠上下文，
因为层叠上下文的层叠水平要比普通元素高。

那再想让layer2覆盖layer1应该怎么做呢。
我们应该给layer2也创建一个层叠上下文，再给layer2的z-index设置的比layer1高即可。

.layer1 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    z-index: 2;
}
.layer2 {
    position: relative;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    background-color: blue;
    z-index: 3;
}

层叠上下文的特性

层叠上下文的层叠水平要比普通元素高；
层叠上下文可以阻断元素的混合模式；
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/