写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. LIS是什么?【质量控制】

    继续[LIS是什么?]中提到的[质量控制]. Ⅱ.质量控制要求非常专业,现在只说一说个人理解,以下仅为LIS检验中部分理解,实际上实验室质量控制还包含的报告时效,实验室温度.湿度等等一系列内容,是一个 ...

  2. 系统学习python第七天学习笔记

    1.get方法用法补充 info = {'name':'王刚蛋','hobby':'铁锤'} while True: data = input('请输入:') val = info.get(data, ...

  3. C语言中getopt()和getopt_long()函数的用法

    一.参考文章 1.C语言中getopt()和getopt_long()函数的用法 2.linux 中解析命令行参数 (getopt_long用法) 二.调试经验

  4. 81.常用的返回QuerySet对象的方法使用详解:values和values_list

    values: 指定提取的数据库表中的字段值,如果不指定任何的字段名的话,默认情况下会提取所有的字段值.但是需要注意的是使用values返回的QuerySet对象中包括的是一个个的字典. 1.提取与A ...

  5. Navicat mysql 数据库备份和使用,备份以后是nb3文件

    通过Navicat进行Mysql数据库自动备份与还原   Mysql数据库自动备份流程 Navicat版本为:Navicat 12.0.26 例:test为用于测试自动备份的数据库,里面有表t_per ...

  6. ZOJ 1454 dp

    Employment Planning Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu S ...

  7. template.js的介绍

    artTemplate 介绍 artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还 ...

  8. Linux-异步IO

    1.何为异步IO (1).几乎可以这么认为:异步IO就是操作系统用软件实现的一套中断响应系统. (2).异步IO的工作方法:我们当前进程注册一个异步IO事件(使用signal注册一个信号SIGIO的处 ...

  9. 2. 现代 javascript 新语法 及 对象专题

    let , const 和 var javascript 里面的作用域 一个大括号 是一个作用域 {  } var 会 在局部作用定义 被定义时 会提升作用域  如 if 的 {} 就属于 局部作用域 ...

  10. c# 多线程——入门学习

    1. 概念介绍 1.1 线程 线程是操作系统能够进行运算调度的最小单位,包含在进程之中,是进程中的实际运作单位.一条线程指的时进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不 ...