CSS:层叠上下文

层叠顺序：

层叠上下文（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。