层叠准则：
- 谁大谁上： 当有识别的z-index值，层叠大的在上
- 后来居上： 当层叠水平一致，层叠顺序相同的时候，在dom流中处于后面的元素会覆盖前面的元素
创建层叠上下文：
- 根层叠上下文：html元素
- 定位元素与传统层叠上下文：position:relative / position:absolute / position:fixed,当其z-index != auto时
- css3：
z-index值不为auto的flex项(父元素display:flex|inline-flex).
元素的opacity值不是1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.
元素的filter值不是none.
元素的isolation值是isolate.
will-change指定的属性值为上面任意一个。
元素的-webkit-overflow-scrolling设为touch.
层叠上下文的层叠水平特性：
- 层叠上下文的层叠水平比普通元素高
- 每个层叠上下文自成一体，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中
情况一：
当两个元素的父级元素没有创建层叠上下文时（z-index = auto），按照z-index的值来进行层叠准则判断，谁大谁上，后来居上的原则，如果两个父级元素创建了层叠上下文（z-index != auto），按照层叠上下文的准则，父级遵循着层叠准则
层叠顺序.png
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
