写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. [题解] Luogu P4245 [模板]任意模数NTT

    三模NTT 不会... 都0202年了,还有人写三模NTT啊... 讲一个好写点的做法吧: 首先取一个阀值\(w\),然后把多项式的每个系数写成\(aw + c(c < w)\)的形式,换句话说 ...

  2. 2020/2/3 PHP代码审计之PHP弱类型

    0x00 简介 php中有两种比较的符号 == 与 === <?php 2 $a = $b ; 3 $a===$b ; 4 ?> === 在进行比较的时候,会先判断两种字符串的类型是否相等 ...

  3. 读书笔记 - js高级程序设计 - 第四章 变量 作用域 和 内存问题

      5种基本数据类型 可以直接对值操作 判断引用类型 var result = instanceof Array 执行环境 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这 ...

  4. HTTP协议(二):作用

    前言 上一节我们简单介绍了一下TCP/IP协议族的基本情况,知道了四大层的职责,也了解到我们这一族的家族成员以及他们的能力. 无良作者把我这个主角变成了配角,让我很不爽,好在我打了作者一顿,没错,这次 ...

  5. mysql5.6免安装使用

    一.去MYSQL官网下载MYSQL免安装版,由于我的系统是64位的,所以就下载了64位的Mysql版本 http://cdn.mysql.com//Downloads/MySQL-5.6/mysql- ...

  6. CNN:扩张卷积输出分辨率计算

    扩张卷积(Dilated convolutions)是另一种卷积操作,也叫做空洞卷积(Atrous convolution).相比于普通的卷积,相同的卷积核,空洞卷积能够拥有更大的感受野. 相同的卷积 ...

  7. Ubuntu无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它?

    转自:http://hi.baidu.com/xiaobaishu 鸣谢: xuleibjtu2010的原创空间 1.终端输入 ps  -aux ,列出进程.找到含有apt‘-get的进程,直接sud ...

  8. VMware Workstation 12 PRo密钥

    注意:手动输入(起初复制输入,一个都没成功,不要偷懒哦) VMware Workstation 12序列号: 5A02H-AU243-TZJ49-GTC7K-3C61N

  9. 步进电机加减速S曲线算法

    一.Sigmoid 函数 1.1 Sigmoid函数原型 1.2 sigmoid函数波形: 由图形可看出在-10时已经接近于0,一般取值区间在[-5,5]. 1.3 sigmoid函数的导数 转载CS ...

  10. APP-计算器

    在网课上学习了计算器的制作方法,并自己做了小常识,看完一便后,感觉自己会了,思想也明白了,但是当关掉视频真正开始做的时候会发向许多的问题,自己在前的好多语法用的并不是很熟练,但是反复的查阅资料,观看教 ...