层叠上下文

层叠准则：

1. 谁大谁上： 当有识别的z-index值，层叠大的在上
2. 后来居上： 当层叠水平一致，层叠顺序相同的时候，在dom流中处于后面的元素会覆盖前面的元素

创建层叠上下文：

1. 根层叠上下文：html元素
2. 定位元素与传统层叠上下文：position:relative / position:absolute / position:fixed,当其z-index != auto时
3. 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.

层叠上下文的层叠水平特性：

1. 层叠上下文的层叠水平比普通元素高
2. 每个层叠上下文自成一体，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中

情况一：
当两个元素的父级元素没有创建层叠上下文时（z-index = auto），按照z-index的值来进行层叠准则判断，谁大谁上，后来居上的原则，如果两个父级元素创建了层叠上下文（z-index != auto），按照层叠上下文的准则，父级遵循着层叠准则

层叠顺序.png

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/