使用z-index无效的解决办法

使用z-index无效的解决办法,首先我们先来了解一下什么是z-index?


z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面


昨天我在写页面的时候就遇到了一个问题就是使用z-index无效,我们先来了解一下使用场景


使用z-index无效的解决办法


我是希望当鼠标移动过去的时候,可以触发显示上图突起样式,上图是做好的样子,我们来看一下起初我一直遇到的一个问题使用z-index无效,当时为了使两边都可以突起,我给了z-index:99,但是无效,不能完全起来,右边的不行。


使用z-index无效的解决办法


其实是因为它的父级存在了 position:relative;把这个标签去掉,或者修改以后就可以了。下面我总结z-index无效的情况,一共有三种:


1、父标签 position属性为relative;


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


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


解决办法有是三个:


1、position:relative改为position:absolute;


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


3、去除浮动。


希望可以帮助到您,如果网页遇到样式问题可以加我微信w252439581


微信扫码咨询
建站咨询
cache
Processed in 0.006924 Second.