z-index失效的场景

1. • 定位（position）

• inherit:继承父元素positon的值

• relative：相对定位 ，一般是根据自身定位的，保留原来的位置。根据top，left，right，bottom来移动位置。

• absolute：绝对定位，根据父元素定位，没有根据浏览器窗口定位，脱离文本流，不保留原来的位置。根据top，left，right，bottom来移动位置。

• fixed:固定定位，根据浏览器窗口定位，脱离文本流，不保留原来的位置。根据top，left，right，bottom来移动位置。

• static：默认值，没有定位，static元素会遵循正常的文档流，top,bottom,left,right属性不起作用。

2. • z-index失效的场景

z-index只对relative，absolut，fixed有效。自身属性必须添加定位

1. 当祖先元素设置（很小）z-index值时，子元素设置多大都不起作用。解决方法：修改祖先元素的值。

2. 当子元素本身添加了float属性时，z-index失效。解决方法 display: inline-block。

3. 当不同父元素为relative时，z-index会失效。解决方法 父元素修改为absolut或static。

4. 自身必须添加position属性。