前言
之前在开发引导提示类组件的时候，遇到了一些层级之间显示问题，在此记录一下。
如何让z-index生效
首先想让z-index 生效，则元素需要一个定位（不为static），否则z-index是不生效的。当元素间重叠的时候，z-index高的元素会显示在上层。z-index的值默认是auto，此时是不会创建一个本地堆叠上下文的。
z-index元素比较特点
-
当同级带有定位元素之间的元素比较时，z-index数值越大的显示在上层。
-
当一个元素A想要和元素B进行z-index之间的层级比较时，首先要看元素A的父级是否有元素设置z-index。如果有的话，则该父级元素会创建一个本地堆叠上下文层级为0，此时后代（元素）的 z-index 不与此元素的外部元素的 z-index 进行对比，如果想让对比生效的话可以通过递归该元素的父级元素把其z-index设置为auto则可以进行对比。
-
元素A的父级存在其他属性时，也可能会导致层级对比失效，比如transform，opacity，float会导致层级对比失效。（transform、opacity会创建更高层级的堆叠上下文。transform可以通过它的translateZ() 来改变元素的层叠顺序，其值越大，越在顶层，离屏幕越近。不过通过transform:translateZ() 改变元素z轴的层级，必须在元素的父元素中显示的设置transform-style:preserver-3d 或者在transform中显示的设置perspective()）。
-
drive.js这个引导页插件在对某一高亮元素进行引导的时候就是通过递归的方式把可能会导致z-index失效的属性通过添加自己的类名对相应的样式进行了覆盖，在去除引导的时候移除相应的类名，但是该方法有点暴力，可能会稍微影响之前的样式，感兴趣的伙伴可以去看下它的源码。
