前言：设置了z-index:9999;的层叠顺序一定高于z-index:0;吗？很明显这句话在某些情况下是不成立的，而引起其不成立的原因就是堆叠上下文的现象。本文主要介绍关于css中堆叠上下文的概念、引起的原因等。
注：友情链接：关于堆叠上下文的MDN介绍，张鑫旭的博客《深入理解CSS中的层叠上下文和层叠顺序》
1、什么是堆叠顺序
从最底层到最高层的顺序如下：
1. 父级元素的background
2. 父级元素的border
3. 块级子元素
4. 浮动元素
5. 父元素的文字或内联子元素
6. 定位元素z-index: 0
7. 定位元素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。
