前端布局遇见的坑之——z-index涉及到的层叠上下文

　　下面就说说使用z-index需要注意的地方：

　　一、使用z-index时，必须同时使用position属性，而且属性值必须是relative、absolute、fixed。

　　二、z-index是根据父元素的z-index值决定的。

　　说的有点简单，比较详细的看这位css z-index详解。

　　层叠上下文——通俗的讲就是在浏览器上我们看到的 哪个元素在上面，哪个在下面。

　　层叠上下文规则：

　　1、同级元素中，谁的层叠等级大，谁在上。

　　2、不同等级的元素，先看父元素的层叠等级，再看子元素的层叠等级

　　3、同级元素等跌等级相同，根据dom结构上下排序

　　在不考虑CSS3的情况下，当元素发生层叠时，层叠顺讯遵循上面途中的规则。 这里值得注意的是：

1. 左上角"层叠上下文background/border"指的是层叠上下文元素的背景和边框。
2. inline/inline-block元素的层叠顺序要高于block(块级)/float(浮动)元素。
3. 单纯考虑层叠顺序，z-index: auto和z-index: 0在同一层级，但这两个属性值本身是有根本区别的　

　　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。