z-index深入了解

如果z-index没有发生嵌套，遵循第一点就是后来居上的准则，第二点就是谁的z-index值大谁上；
如果祖先z-index发生嵌套，遵循祖先优先原则，遵循最父级元素的优先，前提是z-index的值是数值，不是auto;(z-index：auto）的值当前层叠上下文的生成盒子层叠水平是0，盒子（除非是根元素）不会创造一个新的层叠上下文
1.层叠上下文可以嵌套，组合成一个分层次的层叠上下文。
2.每个层叠上下文和兄弟元素独立：当进行层叠变化和渲染时，只需要考虑后代元素。
3.每个层叠上下文是自成体系的，当元素的内容被层叠后，整个元素被认为在浮层的层叠顺序中。

7阶层叠顺序 ：规范元素重叠时的呈现规则
层叠上下文 background
z-index 为负值
3.block块状盒子
4.float盒子
5.inline/inline-block水平盒子
6.z-index:0或者看成z-index:auto不依赖z-index的层叠上下文的盒子
7.正z-index
注意：一旦容器z-index值有了数值，那么图片的层叠上下文就变成了容器
从层叠顺序来看，z-index:auto和z-index:0一样
但是从层叠上下文来看，两者有着本质区别（并不包括ie-7)
其余参与层叠上下文的属性
1.z-index值不为auto的flex项（父元素display:flex|inline-flex）
2.元素的opacity值不是1
3.元素的transform值不是none
4.元素mix-blend-mode值不是normal
5.元素的filter值不是none
6.元素的isolation值是isolate
7.position:fixed声明
8.will-change指定的属性值为上面任意一个
9.元素的-webkit-overflow-scrolling设为touch