【css】解决z-index失效或者不起作用

说来惭愧，最近刚犯错这个错误。为避免再犯，还是记录一下吧。

在出现z-index设置不起作用，没有效果的情况下，我们首先检查z-index设置的元素是否存在以下两种状况：

1. 该元素是否设置了定位
2. 该元素的父级是否已经设置了z-index（检查需比较的元素是否同在一个层叠上下文）

为什么要检查这两种情况呢？我们先来说结论：

• z-index只作用在使用了定位的元素上，也就是我们经常用的position属性，static除外（如果不是定位元素，那我们设置z-index是不会起作用的）
• 同一个父级元素下的元素层叠效果是受父级影响的，就是说如果你的父级z-index很小，那你子级设置再大也没有用

如果看明白了这个结论，那我想你应该找到解决方案了。

几种比较常见的失效情况：

1. 元素没有设置position属性
2. 元素设置了浮动float
3. 父级元素的z-index比子级元素的z-index小
4. 元素的父级设置了position: relative

解决方案：

1. 设置position属性（除了static）
2. 清除浮动
3. 提高父级z-index
4. 父级的position改为绝对定位absolute

好了，后续遇到其他情况再继续补充，也欢迎大家一起交流！