http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
概念
层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。层叠水平和CSS的z-index属性不能混为一谈，某些情况下z-index确实可以影响层叠水平。但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。
在默认情况下（是在css3之前）
inline-block盒子>float盒子>block盒子=(z-index:auto)>负z-index
以上可以理解为，装饰属性在最下，布局属性在上，内容属性在最上面。
display:flex|inline-flex与层叠上下文
<pre><div class="box">
<div>
<img src="mm1.jpg">
</div>
</div></pre>
<pre>
.box { }
.box > div {
background-color: blue; z-index: 1;
} /* 此时该div是普通元素，z-index无效 /
.box > div > img {
position: relative; z-index: -1; right: -150px;
} / 注意这里是负值z-index */
</pre>
这里只看Img的负z-index，所以在默认盒子下面
<pre><div class="box">
<div>
<img src="mm1.jpg">
</div>
</div></pre>
<pre>
.box { display:flex }
.box > div {
background-color: blue; z-index: 1;
} /* 此时该div是层叠上下文，z-index为1 /
.box > div > img {
position: relative; z-index: -1; right: -150px;
} / 注意这里是负值z-index */
</pre>
这里都是层叠了，父级div成了层叠背景。
opacity与层叠上下文
当opacity小于1时，就变成层叠上下文。遵循上面规则，父级div成了层叠背景
** transform与层叠上下文**
添加transform，也会变成层叠上下文
总结：
- 首先关心的是是否是层叠元素，如果是层叠元素，就按照层叠规则（图）作比较。不是层叠元素的，就在图中默认情况。
- 在css3，以下会让元素变成层叠元素：
- opacity小于1
- 新的filter属性
- transform
- 父级元素为flex属性
- 比大小值，同级看顺序。
