z-index无效
什么情况 z-index 会生效
对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），指定 z-index，此时 z-index 会生效
z-index 取值
auto: 盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。
<integer>: 整型数字, 是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。
什么情况 z-index 会失效？
- 先检查当前元素是否为定位元素
- 如果是定位元素，则看父元素是否有设置了 overflow:hidden，overflow:auto, overflow-x:auto, overflow-y:auto, display:none 这些属性，如果有设置，那当前元素的 z-index 可能无效，此时要么你将父元素的这些设置去掉，要么换另外的方式实现
- 父级元素层级低。 如下面的 html 片段，第一个父级 DIV 的层级是 1，第二个父级 DIV 的层级是 2，第一个父级内部的子级 DIV 是 10。由于父级的差距，所以内部子级 z-index 设置很大，不会提升到第二个父级上层，就造成了 z-index 无效的假象。解决方法：查看父元素的 z-index 并修改
html
<div style="z-index:1">
<div style="z-index:10"></div>
</div>
<div style="z-index:2"></div>
- 要覆盖的 html 元素是否也设置了 z-index，其 z-index 是否大于当前元素的 z-index
- 问题标签含有浮动(float)属性。解决方式为去除浮动属性，如果不能去除，就只能想其他方式解决了