1

只对定位元素有效
z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序,也就是说如果元素是没有定位的,对其设置的z-index会是无效的。

相同z-index谁上谁下
相同的z-index其实有两种情况

1.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象,那么按文档流顺序,后面的覆盖前面的。

2.如果两个元素都没有设置z-index,使用默认值,一个定位一个没有定位,那么定位元素覆盖未定位元素

父子关系处理
如果父元素z-index有效,那么子元素无论是否设置z-index都和父元素一致,会在父元素上方

就算子元素设置z-index比父元素小,但是子元素仍然出现在父元素上方
如果父元素z-index失效(未定位或者使用默认值),那么定位子元素的z-index设置生效
兄弟之间子元素
如果兄弟元素的z-index生效,那么其子元素覆盖关系由父元素决定

最后z-index失效的情况:

1、父标签 position属性为relative

2、问题标签无position属性

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

4、问题标签的祖先标签的z-index值比较小

解决方法:

第一种: position:relative改为position:absolute;

第二种:添加position属性(如relative,absolute等);

第三种:去除浮动。

第四种:提高父标签的z-index值


yali
47 声望1 粉丝