前言：设置了z-index:9999;的层叠顺序一定高于z-index:0;吗？很明显这句话在某些情况下是不成立的，而引起其不成立的原因就是堆叠上下文的现象。本文主要介绍关于css中堆叠上下文的概念、引起的原因等。
注：友情链接：关于堆叠上下文的MDN介绍，张鑫旭的博客《深入理解CSS中的层叠上下文和层叠顺序》
1、什么是堆叠顺序
从最底层到最高层的顺序如下：
- 父级元素的background
- 父级元素的border
- 块级子元素
- 浮动元素
- 父元素的文字或内联子元素
- 定位元素z-index: 0
- 定位元素z-index: +
其中，负的z-index出现的位置有两种可能：
- 父元素是
position:static;时：负的z-index出现在0号位（即1.父元素的background的底下一层） - 因一些原因导致了层叠上下文现象出现时，负的z-index出现在2号位与3号位的中间，即只要出现了层叠上下文，子元素的
z-index即使是负的，也会出现在父元素的上边。
普通情况下的层叠顺序示意图
2、层叠上下文出现的原因
- 根元素 (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"的元素
3、我对层叠上下文现象的理解
假设有两个部门，分别是【甲】和【乙】，【甲】在前，【乙】在后，正常情况下，【甲】【乙】中的职员的地位由z-index决定，z-index相同的时候，【乙】中职员级别比【甲】高；而当出现了层叠上下文现象时，就相当甲、乙两个部门的负责的项目发生了变化，假如【甲】负责一个是千万级的项目，【乙】负责的是日常十万级别的项目，所以最终【甲】中的职员，哪怕在部门中的地位再低（即z-index:0），获得的薪酬也会比【乙】部门中的职员包括部门leader（即z-index:9999）要高。
4、一个例子
代码链接
http://js.jirengu.com/boyocekayo/1/edit
html结构
<div class='parent'>
<div class="a relative">a
<div class="a1">a1</div>
</div>
<div class="b relative">b
<div class="b1">b1</div>
</div>
</div>
css样式
.parent{
height: 200px;
border: 10px solid rgba(255,0,0, 1);
padding: 15px;
margin: 12px;
background: #000;
}
.relative{
width: 100px;
height: 100px;
background: orange;
position: relative;
border: 1px solid red;
}
.a1,.b1{
background: green;
height:30px;
position: relative;
}
.a1{
z-index:999;
margin-top:0px;
}
.b1{
background: blue;
margin-top: -80px;
z-index: 0;
}
/*下列代码导致层叠上下文现象*/
.a{
position: relative;
z-index: 1;
}
.b{
position: relative;
z-index: 1;
}
正常情况下，绿色的a1的z-index比蓝色的b1高，所以a1能盖住b1
出现了层叠上下文后，即使a1的z-index:9999;,b1z-index:0;，蓝色的b1还是还是盖住了绿色的a1。
