层叠顺序：
层叠上下文（border/background）< 负z-index < block块状盒子 < 浮动的盒子 < inline/inline-block水平盒子 < z-index:auto 或者 z-index:0 < 正z-index（定位并设定了正的z-index值，z-index值越大 层级越高）
判断两个元素的层叠上下关系：
1、首先先看要比较的两个元素是否处于同一个层叠上下文中：
1.1如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。
1.2如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级，并且子元素受限于父元素的层叠等级。
2、当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。
CSS3中的属性对层叠上下文的影响：
1.父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
2.元素的opacity属性值不是1；
3.元素的transform属性值不是none；
4.元素mix-blend-mode属性值不是normal`；
5.元素的filter属性值不是none；
6.元素的isolation属性值是isolate；
7.will-change指定的属性值为上面任意一个；
8.元素的-webkit-overflow-scrolling属性值设置为touch。
