关于z-index层级问题

关于z-index层级问题

我们想通过使用z-index改变父子层级,使父亲的层级高于孩子,从而覆盖儿子,然而结果却不是我们想要的,无论我们怎么调高父亲层级,降低儿子层级都没有用
首先使用z-index需要先加上position:absolute/relative定位
然后你要知道z-index 是要考虑父级的,如果子级z-index为0,那么父级就是200000也不会覆盖住子级。原因如下:
在标准浏览器中,对父级的要求不是特别高,同级的对应上z-index可以了。但要注意的是父级里放一个子级那么父级是无法放在子级之上的,需要放在同一级别中才可以(经过测试的)
如果想要父级覆盖子级,那么父级不需要设置z-index,只要孩子设置就z-index就可以了。
把子元素的z-index设置成负值,这样就可以实现父元素的盖在子元素之上
这样引发的问题是在下方的元素会覆盖掉子元素,为了让下方的元素不至于覆盖掉子元素只能给下方的元素一个个加负层级了。
z-index的属性设置是同级判断,同级覆盖,父子之间只有子元素的层级为负值时才会覆盖,且父级没有设置z-index属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值