关于css中hover下拉框的一个bug
写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的更多相关文章
- 选择屏幕中的下拉框和dialog中下拉框设计
REPORT YTEST014. PARAMETERS: auart LIKE vapma-auart AS LISTBOX VISIBLE LENGTH 6. AT SELECTION-SC ...
- ASP.NET MVC中的cshtml页面中的下拉框的使用
ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- 商品类型的下拉框绑定一个事件,通过ajax获取属性
html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...
- 用css写出下拉框(代码转自wq群)
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- Excel中添加下拉框
数据->数据验证->数据验证 设置—>允许下拉框中选择序列,来源中写下拉选项,每个选项之间用逗号隔开
- 在angular中实现下拉框的两种方式 ng-repeat和 ng-option
1. ng-repeat实现下拉框: select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 实现源码 <!DOCTYPE html> <html&g ...
随机推荐
- 实验吧web-易-上传绕过
随便上传一个png文件,出现提示 我们再上传一个php文件,却出现提示 上传遇到问题是肯定的,题目就是上传绕过,所以我们下面要做的就是绕过检测. 这里使用00截断. 首先在提交时抓包 我们将图中upl ...
- MySQL-复制技术演进过程
复制技术的演进可以分为:基于数据安全的复制,基于效率的复制 基于数据安全的复制 异步复制 参考: https://baijiahao.baidu.com/s?id=163939455634386120 ...
- 用Python在00:00给微信好友发元旦祝福语
2019年的元旦即将来临,这里用Python撸一串简单的代码来实现定点给微信里的所有小伙伴发祝福语 环境说明 Python版本: 不限 第三方库: itchat, schedule 注:所有祝福语来源 ...
- 51nod 1346:递归
1346 递归 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 函数f(n,m) { 若n=1或m=1返回a[n][m]; 返回f(n-1,m)异或 ...
- you-get使用
1.pip install you-get 2.如果出错 查看错误bug you-get http://www.iqiyi.com/v_19rrnqxz7k.html#vfrm=2-4-0-1 ...
- ADC分辨率
转载:http://www.rationmcu.com/elecjc/1874.html 今天给大家简单介绍一下ADC器件的常识. ADC,模数转换器,功能是把模拟电压转换成数字量. 概念听的模糊,说 ...
- html—表单控件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- python之路(dingo 框架)
Python之路 转载自QIMI老师 Python之路 第一篇:Python基础 PyCharm使用秘籍免费视频教程v3 ... 迭代器生成器 模块和常用内置模块 面向对象 面向对象进阶 网络编程 ...
- SQL 2005 带自增列 带外键约束 数据导入导出
1,生成建表脚本 选中要导的表,点右键-编写表脚本为-create到 ,生成建表脚本 2,建表(在新库),但不建外键关系 不要选中生成外键的那部分代码,只选择建表的代码 3,导数据,用SQL STU ...
- 黑客攻防技术宝典web实战篇:测试后端组件习题答案
随书答案. 某网络设备提供用于执行设备配置的 Web 界面.为什么这种功能通常易于受 到操作系统命令注入攻击? 用于配置网络设备的应用程序通常包含使用正常的 Web 脚本 API 无法轻松实 现的功能 ...