关于css中z-index属性失效的一些原因

1,812 阅读1分钟

今天在修改项目的前端样式问题的时候发现了一个问题,一个组件的层叠顺序有问题,然后直接给这个div添加了z-index属性,发现z-index的属性无论设置多少都没有效果。一开始以为是因为该元素没有设置定位也就是position,可是发现该元素也有position: absolute;然后去该元素的父级元素查找position,发现都有设置,最后发现原因是盖住该元素的div没有设置z-index属性,因为这两个div的同父级元素设置了position: relative;那么这两个元素就需要分别设置层级属性,才能实现一个对另一个的覆盖。

然后在查找资料的过程中,也了解到一些其他的z-index属性不生效的原因,这里分享给大家,也方便自己查阅

1、父标签 position属性为relative;

2、问题标签无position属性(不包括static);

3、问题标签含有浮动(float)属性。

这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了,他的解决办法有是三个:

1、position:relative改为position:absolute;

2、浮动元素添加position属性(如relative,absolute等);

3、去除浮动。