z-index：改变元素的层级，只在定位元素position上有效（非static），当元素与元素之间的层级进行比较时，这两个元素必须在同一个层叠上下文中，不然没有可比性。
比较两个元素的层级：
1：当两个元素在同一个层叠上下文中，谁的z-index大谁就在上面
2：当两个元素不在同一个层叠上下文中，先找出他们的父级（向上追溯）所在的同一个层叠上下文，然后比较这两个父级的z-index即可。
层叠上下文：
假定用户正面向（浏览器）视窗或网页， HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。
生成层叠上下文的方式：
1：HTML中的根元素
2：普通元素设置position属性（非static）并且设置 z-index(非auto)属性
3：css的新属性，具体如下：
if (
/[0-9]+/.test(zIndex)
|| opacity < 1
|| (transform && transform !== 'none')
|| (transformStyle && transformStyle !== 'flat')
|| (transformBox && transformBox !== 'border-box')
|| (filter && filter !== 'none')
|| (perspective && perspective !== 'none')
) {
// 以上属性如果出现，就会生成层叠上下文
}
代码来自于 web端新手指引库
注意：当z-index为auto时，当前元素不会生成层叠上下文，上面指引库就是使用这个表原理实现的
