堆叠顺序

我们首先来看一下堆叠层级，也就是我们常说的堆叠顺序，我们从以下的情况来看堆叠顺序对于元素布局的影响：

背景与边框的重叠

我们来看一个简单的例子：

<div class="test"></div>

.test {
    width: 100px;
    height: 100px;
    background-color: red;
    border-width: 5px;
    border-color: rgba(0,255,0,1);
    border-style: solid;
}

这个效果非常的简单，在一个背景为红色的div上，有一圈绿色的边框，现在让我们减弱边框的透明度，border-color: rgba(0,255,0,0.3);我们可以很明显的看到在绿色的背景下，红色的背景，这说明事实上二者之间并不是平级摆放的关系，border是在background之上的。

块级元素，行内元素与浮动元素

还是通过例子来看这三类元素。直接在上面那个例子上面改，在div中增加三个元素，然后为了让他们相互叠加，从而看到他们的层级效果，我们给他们加上了相应的margin：

<div class="test">
     <span class="test-inline">span元素</span>
     <div class="test-block"></div>
     <div class="test-float"></div>
</div>

.test-inline{
    color: #fff;
    margin-left: -10px;
}
.test-block{
    background: grey;
    width: 50px;
    height: 50px;
    margin-left: -10px;
    margin-top: -10px;
}
.test-float{
    width: 30px;height: 50px;
    float: left;
    background: blue;
    margin-top: -60px;
    margin-left: -10px;
}

我们可以看到这样的效果：

定位的影响

接下来我们来看定位对于堆叠顺序的影响,我们再test那个div中再加入一个类名为test-position的div，给他设置下面的css样式：

.test-position{
    width: 30px;height: 50px;
    background: green;
}

接下来我们改变这个div的布局，发现他会有如下两种情况：

position为absolute，relative,sticky和fixed时的情况

postion为其他值时的情况

z-index

最后来看z-index这个属性，它可以在我们的div的position不是static或者unset的时候生效，其实也就是上面的那四种情况下可以生效，我们还是给他增加一个类名为test-index的div，然后设置一个基本样式

.test-index{
    width: 50px;
    height: 30px;
    background: indigo;
    margin-top: -50px;
}

在默认的情况下 z-index为auto，我们可以看做是0，因为定位属性的原因，我们看到这个元素已经在顶层显示，但是当我们修改z-index这个属性为负数的时候，元素就会跑到background下面，消失不见。

因为position的关系，在最上面

当z-index设置为负数

这里顺带提一下z-index的原则：大的在上面，如果数字相同，则后来的在上面。
这样，我们就可以得出层叠等级的关系：

z-index为正 > postion为absolute,relative,sticky以及fixed(z-index为0/auto) > 内联元素 > 浮动元素 > 块级元素 > border > background > z-index为负

堆叠上下文

现在让我们来看一下堆叠上下文。
堆叠上下文(stack context)，其实和BFC有点像。在不同的堆叠上下文中，堆叠的顺序可能会没有影响，那么怎么样可以生成一个堆叠上下文呢。

堆叠上下文的形成条件

关于堆叠上下文的形成条件，比较绕，有以下几种情况都可以生成一个新的堆叠上下文：

• 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"的元素

堆叠上下文的作用

我们简单来举个例子来看一下两个堆叠上下文对于z-index的影响：

<div class="test1">
    <div class="test1-div"></div>
</div>
<div class="test2">
    <div class="test2-div"></div>
</div>
.test1{
    width: 100px;height: 100px;
    background: green;
}
.test1-div{
    width: 50px;height: 50px;
    background: blue;
    z-index: 2;
    position: absolute;
}
.test2{
    width: 100px;height: 100px;
    background: red;
    margin-top: -60px;
}
.test2-div{
    width: 50px;height: 50px;
    background:yellow;
    z-index: 1;
    position: absolute;
}

现在这个情况是这样的：