CSS之层叠上下文-一一网

这是我参与更文挑战的第19天，活动详情查看：更文挑战

一、什么是层叠上下文

层叠上下文（stacking context）：

其实就是我们虚构的一个概念，就像是我们看页面的时候，你看着好像只有一层，其实有很多层。
如果是层叠上下文的元素，就拥有优先接近我们用户的权力。（好像接近我们多好似的。

二、z-index

要讲层叠上下文，就必须讲一下z-index，z-index规定了元素的层级关系。
当我们要指定元素的排列顺序的时候，给元素指定z-index就可以修改它的顺序。

注意：z-index只对指定了position属性的元素有效。

z-index数值越大，它的优先级越高，也就是在上面。

如果没有指定z-index的情况下，所有的元素默认都在默认层（0层）
，比如

    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
复制代码

    div {
        opacity: 0.7;
        position: relative;
    }
   
    #div1 {
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: absolute;
    }
    
    #div2 {
        width: 200px;
        height: 200px;
        background-color: rgb(234, 0, 255);
        margin-left: 50px;
        position: absolute;
        z-index: 1;
    }
    
    #div3 {
        width: 200px;
        height: 200px;
        background-color: rgb(255, 187, 0);
        margin-left: 100px;
        position: absolute;
        z-index: 2;
    }
复制代码

效果?

三、层叠水平（stacking level）

如果说层叠上下文就是一种有优先接近我们的权力，那层叠水平就是决定了同一个层叠上下文当中元素在z轴上的显示顺序。

层叠水平不是刚刚提到的z-index，虽然z-index能够影响层叠水平，但是z-index只作用于拥有定位的元素。而层叠水平存在于所有的元素。

四、为什么会有层叠上下文

当我们渲染网页的时候，有可能因为网络延迟等问题没有在很短的时间内渲染出来，也就是说，可能是先渲染了一部分内容出来，那么我们想要的这部分先渲染出来的内容肯定是重要的，就可以让重要的内容的层叠顺序变得高。

五、层叠上下文的元素

根据MDN的定义，层叠上下文元素包括：

文档根元素（<html>）；
position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
flex 容器的子元素，且 z-index 值不为 auto；
grid 容器的子元素，且 z-index 值不为 auto；
opacity 属性值小于 1 的元素；
mix-blend-mode 属性值不为 normal 的元素；
以下任意属性值不为 none 的元素：
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
isolation 属性值为 isolate 的元素；
-webkit-overflow-scrolling 属性值为 touch 的元素；
will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
contain 属性值为 layout、paint 或包含它们其中之一的合成值的元素。