position:relative 与position:absolute

本文介绍了一种通过添加额外绝对定位子元素的方法来解决父级元素无法覆盖被设置为position:absolute的子元素的问题,并展示了如何利用z-index属性实现元素层级控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

父级元素为position:relative   


子元素为position:absolute


如果想让父级元素在子元素之上,即z-index:100;       子元素为z-index:90,这样是不行的,因为子元素始终都是在父级元素之内,且会一直在父元素之上,而不管它的z-index是不是比父级元素的小。


但是我又想让父元素在子元素之上又该 怎么办呢?


解决办法是在父元素的里面再加上一个子元素,让这个子元素和之前的子元素是同一级,且也是position:absolute。让这个元素的z-index比之前的子元素的z-index大一点就好了。例子:


这里做的就是让两个子元素都绝对定位,而且上面导航的那个子元素的z-index比下拉框 的要大,且它的border-bottom:solid 1px #fff,这样就能做出来两者正好在直交的地方会空出来位置,就好像那一块下拉框 没有边框似的效果了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值