层叠上下文、层叠等级、层叠顺序、z-index

元素Z轴上下位置规则：

1、首先看是否处于同一层叠上下文， 如果是 ------看层叠等级（等级越大、越上面）。 如果不是 ------- 先比较它们所处的层叠上下文的层叠等级。
2、当两个元素层叠等级相同、层叠顺序相同时、 在Dom结构中 后面的元素层叠等级在前面元素之上。

3、层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的

层叠上下文：

1、HTML中的根元素本身就具有层叠上下文，称为“根层叠上下文”。

2、普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。

3、CSS3中的新属性也可以产生层叠上下文。

层叠顺序：

层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。

不考虑CSS3的情况下，当元素发生层叠时，层叠顺讯遵循上面图中的规则

注意：

左上角"层叠上下文background/border"指的是层叠上下文元素的背景和边框。

inline/inline-block元素的层叠顺序要高于block(块级)/float(浮动)元素。（为什么inline/inline-block元素的层叠顺序要高于block(块级)/float(浮动)元素？ 就像像border/background属于装饰元素的属性，浮动和块级元素一般用来页面布局，而网页设计之初最重要的就是文字内容，所以在发生层叠时会优先显示文字内容，保证其不被覆盖。）

单纯考虑层叠顺序，z-index: auto和z-index: 0在同一层级，但这两个属性值本身是有根本区别的。

CSS3中的属性对层叠上下文的影响

CSS3中出现了很多新属性，其中一些属性对层叠上下文也产生了很大的影响。如下：

父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；

元素的opacity属性值不是1；

元素的transform属性值不是none；

元素mix-blend-mode属性值不是normal`；

元素的filter属性值不是none；

元素的isolation属性值是isolate；

will-change指定的属性值为上面任意一个；

元素的-webkit-overflow-scrolling属性值设置为touch。