写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. Mac下使用Hexo搭建个人博客

    Hexo介绍 利用原作者的一句话:A fast,simple&powerful blog framework,powered by Node.js Hexo是基于Node.js的博客平台,He ...

  2. (递归)P1192 台阶问题

    题解: 这其实是变相的斐波那契,观察下列等式: //k=2 : 1 2 3 5 8 13 21 34...... //k=3 : 1 2 4 7 13 24 44 81... //k=4 : 1 2 ...

  3. python单链表的基本操作思路

    单链表: 1.定义链表 class ListNode: # 定义节点 def __init__(self, x): self.val = x # 节点当前值 self.next = None # 指向 ...

  4. 使用 prototype 定义方法和属性

    除了可以在类的构造器方法中定义方法和属性外,也可以使用 prototype 定义方法和属性.每个类都有这个属性,该属性是一个静态属性,因此无需实例化,只需使用类引用该属性即可. 1.1 使用 prot ...

  5. jQuery实现轮播图--入门

    jQuery是一个前台的框架. 主要函数: setInterval 语法:setInterval(code,millisec[,"lang"]) cdoe:需要执行的代码或者要调用 ...

  6. It can be a face application using SeetaFace and Qt.

    之前编译了一下SeetaFace的库,用于人脸检测.特征点定位和人脸识别的功能,然后昨天就用Qt写了一个软件用于实现. 工程的文件还是比较简单的,一个界面类和一个SeetaFace的线程类而已.这里主 ...

  7. (递归)P1036 选数

    #include<stdio.h>#include<math.h>int x[20],n,k,i; //判断是否质数 int isprime(int n){    for(i= ...

  8. Go-并发和并行-协程-信道-缓冲信道-select-mutex-读写文件-beego框架

    并发 Go 是并发式语言,而不是并行式语言.在讨论 Go 如何处理并发之前,我们必须理解何为并发,以及并发与并行的区别. 并发是什么? 并发是指立即处理多个任务的能力.一个CPU的情况下<意指看 ...

  9. Linux--Centos安装VNC

    参考:https://linux.cn/article-5335-1.html 安装 vnc 服务器 yum install tigervnc-server -y 配置 vnc .service 更改 ...

  10. Java 面向对象异常处理,finally,覆盖时异常特点,package,import,包之间的访问(10)

    Java 面向对象异常处理, finally:final 关键字的用法参考http://www.cnblogs.com/itcqx/p/5541659.html 覆盖时异常特点,package,imp ...