html的下拉菜单被遮盖问题,使用z-index解决

文章讨论了前端开发中下拉菜单被遮挡的问题,分析了绝对定位和相对定位的特点,提出通过设置绝对或相对定位并利用z-index调整层级关系来解决此问题。
摘要由CSDN通过智能技术生成

今天在写前端页面的时候做的下拉菜单被下面的部分给遮盖住了可以看到红色的盖住了下拉菜单,这个问题的出现,是因为红色那块区域用了绝对定位或者相对定位,

这是使用了绝对定位:

这是用了相对定位:

(相对定位的时候选中课程分类图片向下移动,应该是因为下拉菜单的高度导致)

绝对定位的一个特点就是一旦设置绝对定位,那么它原来占着的位置就被其他元素完完全全给忽略掉了,也就是说脱离了标准流,其他盒子或者文字啥的都会完全忽略掉他。

相对定位不脱离标准流,但是使用了相对定位来调位置,他也会把之前在那里的给盖住。

那这个问题如何解决?

可以对下拉菜单那部分也用一个绝对定位absolute,或相对定位relative,这个时候就可以用z-index来调整他和哪个绝对定位的层级关系了(fixed也适用z-index)

相对定位:

绝对定位:

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值