写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. python人脸识别项目face-recognition

    该项目基于Github上面的开源项目人脸识别face-recognition,主要是对图像和视频中的人脸进行识别,在开源项目给出的例子基础上对视频人脸识别的KNN算法进行了实现. 0x1 工程项目结构 ...

  2. 2019 年 Google 编程之夏活动报告

    2019 年 Google 编程之夏活动报告 主要介绍了 GSoC 2019 活动的几个课题并讲述了整个活动的组织过程 Google 编程之夏活动不仅仅是一个夏日的实习项目,对于组织和一些社区的成员来 ...

  3. 快速幂的类似问题(51Nod 1008 N的阶乘 mod P)

    下面我们来看一个容易让人蒙圈的问题:N的阶乘 mod P. 51Nod 1008 N的阶乘 mod P 看到这个可能有的人会想起快速幂,快速幂是N的M次方 mod P,这里可能你就要说你不会做了,其实 ...

  4. 为什么 execute(`echo 中文`) 输出中文源码?

    为什么 execute(echo 中文) 输出中文源码? import win.ui; /*DSG{{*/ var winform = win.form(text="管道演示";r ...

  5. Java集合--list接口

    list是一个接口,实现类:Arraylist,Vector,Linkedlist list接口(有序): 常用方法 排除Collection中具有的之外的 添加功能 void add(int ind ...

  6. 从1到n整数中1的个数

    [问题]求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了.A ...

  7. Qt creator中配置opencv win7 64bit

    配置方法的原文来自https://www.librehat.com/qt-5-2-vs2012-opencv-2-4-7-dev-environment-setup-tutorial/. 补充,在张静 ...

  8. 工程日记之HelloSlide(2) : UITextView中如何根据给定的长宽,计算最合适的字体大小

    需求描述 一般的需求是将UITextview的大小自适应文本高度,会做出随文本内容增加,文字框不断增大的效果: 本文反其道而行之,在给定文字框大小的情况下:字数越多,字体越小: 需求来源: 考虑将文字 ...

  9. UVA 12657/COJ 1329 HN第九届省赛 链表模拟

    因为最近学了Splay,刚看到这个题目总共四种操作,把某个数移到另一个数的左边 或者右边 交换两个数 翻转整个序列,马上想到用Splay,因为总点数和总操作数都为10^5,如果用Splay把操作优化到 ...

  10. MySQL数据库索引常见问题

    笔者看过很多数据库相关方面的面试题,但大多数答案都不太准确,因此决定在自己blog进行一个总结. Q1:数据库有哪些索引?优缺点是什么? 1.B树索引:大多数数据库采用的索引(innoDB采用的是b+ ...