写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡。

如图:

这个语言选择的下拉框会被下面的div挡住(截图是已经修复后的)。

无论是设置下拉框的z-index还是改父元素的position都无法解决。最后的解决方案是把div的z-index设置为负数。

注意,有可能div的z-index改为负数后会潜到页面的背后,导致div的内容完全被body遮挡。我建议如果遇到这种情况可以把html和body元素的z-index设为一个较小的负数如-999,这样可以保证div不会被body遮挡。

还有一种情况是div的z-index设为负数后里面的内容就无法点击了,这个问题的解决方案也可以用刚才设置父元素(如html和body)的z-index为较小值来解决。

把遮挡的div的z-index设为负数后,下拉框就不会被遮挡了。

关于css中hover下拉框的一个bug的更多相关文章

  1. 选择屏幕中的下拉框和dialog中下拉框设计

    REPORT  YTEST014. PARAMETERS: auart LIKE vapma-auart  AS LISTBOX   VISIBLE LENGTH 6. AT SELECTION-SC ...

  2. ASP.NET MVC中的cshtml页面中的下拉框的使用

    ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...

  3. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  4. 商品类型的下拉框绑定一个事件,通过ajax获取属性

    html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...

  5. 用css写出下拉框(代码转自wq群)

    做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...

  6. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  7. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  8. Excel中添加下拉框

    数据->数据验证->数据验证 设置—>允许下拉框中选择序列,来源中写下拉选项,每个选项之间用逗号隔开

  9. 在angular中实现下拉框的两种方式 ng-repeat和 ng-option

    1. ng-repeat实现下拉框: select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 实现源码   <!DOCTYPE html> <html&g ...

随机推荐

  1. 实验吧web-易-上传绕过

    随便上传一个png文件,出现提示 我们再上传一个php文件,却出现提示 上传遇到问题是肯定的,题目就是上传绕过,所以我们下面要做的就是绕过检测. 这里使用00截断. 首先在提交时抓包 我们将图中upl ...

  2. MySQL-复制技术演进过程

    复制技术的演进可以分为:基于数据安全的复制,基于效率的复制 基于数据安全的复制 异步复制 参考: https://baijiahao.baidu.com/s?id=163939455634386120 ...

  3. 用Python在00:00给微信好友发元旦祝福语

    2019年的元旦即将来临,这里用Python撸一串简单的代码来实现定点给微信里的所有小伙伴发祝福语 环境说明 Python版本: 不限 第三方库: itchat, schedule 注:所有祝福语来源 ...

  4. 51nod 1346:递归

    1346 递归 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 函数f(n,m) { 若n=1或m=1返回a[n][m]; 返回f(n-1,m)异或 ...

  5. you-get使用

    1.pip install you-get 2.如果出错  查看错误bug    you-get http://www.iqiyi.com/v_19rrnqxz7k.html#vfrm=2-4-0-1 ...

  6. ADC分辨率

    转载:http://www.rationmcu.com/elecjc/1874.html 今天给大家简单介绍一下ADC器件的常识. ADC,模数转换器,功能是把模拟电压转换成数字量. 概念听的模糊,说 ...

  7. html—表单控件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. python之路(dingo 框架)

    Python之路  转载自QIMI老师  Python之路 第一篇:Python基础 PyCharm使用秘籍免费视频教程v3 ... 迭代器生成器 模块和常用内置模块 面向对象 面向对象进阶 网络编程 ...

  9. SQL 2005 带自增列 带外键约束 数据导入导出

    1,生成建表脚本 选中要导的表,点右键-编写表脚本为-create到  ,生成建表脚本 2,建表(在新库),但不建外键关系 不要选中生成外键的那部分代码,只选择建表的代码 3,导数据,用SQL STU ...

  10. 黑客攻防技术宝典web实战篇:测试后端组件习题答案

    随书答案. 某网络设备提供用于执行设备配置的 Web 界面.为什么这种功能通常易于受 到操作系统命令注入攻击? 用于配置网络设备的应用程序通常包含使用正常的 Web 脚本 API 无法轻松实 现的功能 ...