[前端]z-index属性在什么情况会失效？怎么解决？

层级——指得是定位的时候有一定的位置层叠效果。
通常z-index的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。
用法：z-index: 数字;这个数字不带单位，数字越大层级越高。
默认：所有的定位的元素的z-index都是0。层级相同的元素，后定位的，在上面。

注意：
1.z-index这个属性只对设置了定位的元素有效。
2.如果一个元素的父元素也设置了定位，那么层级关系的高低，以父元素为准。
3.z-index元素的position属性需要是relative、absolute或是fixed。
4.定位的元素可能会叠加，先定位的会被后定位的压住。
5.可以使用z-index进行顺序的调整，值越大，就越在上面。

z-index属性在什么情况会失效？
（1）当父元素position属性的值为relative时，子元素的z-index属性会失效。
解决方案：父元素position改为absolute或static；

（2）当元素没有设置position属性为非static属性时会失效。
解决方法为：设置该元素的position属性为relative，absolute或是fixed中的一种。

（3）当元素在设置z-index的同时还设置了float浮动。
解决方法为：去掉float，改display属性的值为inline-block。