前端排坑记录：解决下拉菜单被图片或DIV遮挡问题

最新推荐文章于 2024-04-10 14:15:41 发布
最新推荐文章于 2024-04-10 14:15:41 发布
阅读量1.6w 收藏 26
点赞数 17
分类专栏： 问题解决记录 文章标签： HTML 下拉框被遮挡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40120737/article/details/80328748
版权

下拉菜单被下面的各种奇奇怪怪的元素遮挡，被图片遮挡、被P标签遮挡。。。一开始遇到这个问题的时候，我也想到了肯定是z-index的缘故，然后就去给下拉菜单了一个position:relative; z-index:999;

本以为可以解决问题，结果一经测试，还是老样子，如图：

然后就是各种尝试，给遮挡它的元素也设置z-index:9;给下拉菜单的子元素设置z-index:999。。。还是没一点反应

求助度娘搜到的也全都是我已经试过的方法。

最后抱着试试的心态，给遮挡下拉菜单的元素设置了个z-index:-1;问题神奇解决



招魂猫0007
关注
  • 17
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
html 下拉组件被下面的组件挡住,div被select下拉框挡住了--5种解决方法
weixin_39768371的博客
06-03 912
在IE中,select属于window类型控件，它会“挡住”所有非window类型控件可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上，而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，比如iframe和其他的select，如果你使用过...
html 下拉组件被下面的组件挡住,select挡住div的5种解决方法
weixin_42466331的博客
06-09 1485
在IE中,select属于window类型控件，它会“挡住”所有非window类型控件可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上，而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，比如iframe和其他的select，如果你使用过...
下拉导航菜单被遮住解决办法
weixin_33941350的博客
01-16 1167
近期有几位客户购买了“天兴模板工作室自用模板”后自行修改时发现了一个问题。   在把这个下拉菜单移到左侧或者直接在左侧加下拉菜单时候发现：下拉菜单被下面的滚动幻灯片给遮住了。 这个问题是由于div的定位造成的，幻灯片由于使用了js的关系使用了很多绝对或者相对定位。解决办法如下： 在封装幻灯片的div的id属性后面加上一句代码：  代码如下 复制代码 style="z-index:-999...
Bootstrap的下拉菜单被Div挡住
qq_36815739的博客
09-06 6077
https://blog.csdn.net/jaris_jade/article/details/79084143 原理 给当前div添加样式 overflow:visible
antd modal上的dropdown下拉框弹窗位置不固定+被遮挡解决
最新发布
hang_zh的博客
04-10 456
项目场景：antd框架下，Modal弹窗页面上存在Dropdown下拉组件。
html li下拉被div或者其他挡住的解决方法
qq_41212530的博客
04-17 3363
1：将div置于最底层 <div style="z-index:-100;position: relative;"></div 2:将li置于最高层 <li style=""z-index:9999;position: relative;></li>
html导航下拉菜单被遮住,导航下拉菜单被遮住或显示不全问题所在和解决办法...
weixin_35192920的博客
06-05 7384
导航下拉菜单被banner遮住/显示不全，这种问题是老生常谈了，经常有新手会问，有些人做了2、3年的还会经常犯错，而且好多人还以为是js问题，其实这是基本的css知识。我觉得还是有必要写一遍文章解释给新手们。一、导航下拉菜单被遮住，那是因为层叠关系错误我们必须理解层叠关系满足的2个条件：1、必须是同级；2、二者分别设定了position:relative 或 absolute 或 fixed；这时...
如何盖住html页面上的SELECT（下拉框）元素
cxzhq2002的杂记
10-11 1737
下拉框，即html的SELECT元素，.net设计时的DropDownList，是html中的windowed   element，尤其ie6之后，几乎是唯一的windowed   element（还有popup等少量极少用的的）。         普通的元素，textbox,   div,   table……这些，属于windowless   element，它们之间互相遮盖的情况由z-inde
html div遮住下拉菜单,HTML – 我如何安排其他div后面的div下拉,以便覆盖下拉边界的一部分？...
weixin_39834090的博客
06-03 180
我正在为化身构建一个简单的下拉菜单.我遇到的问题是我希望下拉菜单覆盖化身边框的一部分,因此看起来更加无缝.这就是我的意思.之前后我可能错误地构建了我的HTML / CSS,但我尝试添加z-index,但它从未改变任何东西.我基本上试图将下拉菜单放在头像按钮后面,并将头像的底部边框设置为无,因此它看起来无缝.任何想法我可以做的不同？HTML TestCSSheader ...
解决div层被select下拉框遮盖的问题
URL的专栏
04-27 7239
在IE里，层DIV被下拉框SELECT遮盖，这是IE的bug之一，原因在于select的优先级别比div高。因此无论如何用css属性z-index设置都没用。所以，解决的办法有两种在显示div的时候隐藏所有select让div里的内容比select的优先级还要高第一种方法显然比较麻烦，特别是当select比较多且位置不固定的时候，很容易将不该隐藏的也隐藏了。第二钟办法更好一些。常用的优先级比sel
div被select下拉框挡住了--5种解决方法
热门推荐
新新
12-31 1万+
在IE中,select属于window类型控件，它会“挡住”所有非window类型控件可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上，而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，比如iframe和其他的sel
select网页下拉列表与div层遮盖问题
12-12
在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。 第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果你在FirFox下和IE7下看都 在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。 相关文章：div层被flash层遮盖问题解决思路 第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果
巧用jquery解决下拉菜单被Div遮挡的相关问题
12-12
用jquery的hover事件，当鼠标移动到menu时，把遮挡下拉菜单的div设置为负值，鼠标离开时恢复正值， 代码如下： 代码如下:$(“#menu”).hover( function() { $(“.divName”).css(“z-index”, “-1”); }, function() { $(“.divName”).css(“z-index”, “0”); });
前端jQuery学习：新浪下拉菜单
04-04
前端jQuery学习，适合前端小白，跟着pink老师一起学前端，jQuery虽然不是最新的技术，应用还是很广泛的，前端学习不可缺少的内容，学完jQuery，学习node，然后学习webpack，再学习Vue，这是我制定的前端学习路径，...
解决bootstrap中下拉菜单点击后不关闭的问题
10-18
总之，解决Bootstrap中下拉菜单点击后不关闭的问题，关键在于理解事件传播机制，并通过添加特定的事件监听器和属性来控制下拉菜单的关闭行为。通过这种方式，我们可以确保下拉菜单在需要的时候保持打开状态，提供更...
解决下拉菜单被iframe遮住问题
07-28
在网页设计中，下拉菜单经常用于实现导航或者...总之，解决下拉菜单被`iframe`遮住的问题通常涉及调整`z-index`、重新定位元素或使用JavaScript进行动态调整。根据具体场景选择合适的方法，可以有效地解决这类问题。
html导航栏下拉菜单被遮挡
06-12
如果你的导航栏下拉菜单被遮挡了，可以考虑以下几种解决方案： 1. 设置 `z-index` 属性：为导航栏和下拉菜单设置合适的 `z-index` 属性，使其在页面上的层级高于遮挡它的元素。 2. 调整布局：如果下拉菜单过长，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值