写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. 从单个系统到云翼一体化支撑,京东云DevOps推进中的一波三折

    作者:王利莹 采访嘉宾:京东云DevOps团队负责人 郑永宽 今年,IDC 特别针对中国地区发布了<IDC MarketScape:中国 DevOps 云市场2019,厂商评估>研究报告, ...

  2. PAT Advanced 1155 Heap Paths (30) [DFS, 深搜回溯,堆]

    题目 In computer science, a heap is a specialized tree-based data structure that satisfies the heap pr ...

  3. Multiarmed Bandit Algorithm在股票中的应用

    股票与Bandit Machine看起来相去甚远,但实际上通过限制买入和卖出的行为,股票可以转换为Bandit Machine,比如:规定股票必须在买入一天以后卖出.为什么要大费周折地把股票变成Ban ...

  4. 一天一个设计模式——Builder建造者模式

    一.模式说明 在现实世界中,当我们要构造一个大型工程时(建一个大楼),通常的做法是先建造工程的每个独立部分,然后再逐步构造完成(先打地基,再搭框架,最后逐层累造).在程序设计领域,构造一个复杂的类时( ...

  5. Map—数据结构

    map是数据结构的一种,map总是以key-value的形式保存数据的, 根据key来查找value的值,但是key的值是唯一的,在同一个map中不能重复. 常用的实现类java.util.hashM ...

  6. Mac 用终端(命令行)打开vscode编辑器

    1.打开控制面板(⇧⌘P) 2.输入 shell command 在提示里看到 Shell Command: Install ‘code’ command in PATH, 就可以了. 3.使用: c ...

  7. 转 SQL 的数据库 架构规范 之 58到家数据库30条军规解读

    军规适用场景:并发量大.数据量大的互联网业务 军规:介绍内容 解读:讲解原因,解读比军规更重要 一.基础规范 (1)必须使用InnoDB存储引擎 解读:支持事务.行级锁.并发性能更好.CPU及内存缓存 ...

  8. Q3:Longest Substring Without Repeating Characters

    3. Longest Substring Without Repeating Characters 官方的链接:3. Longest Substring Without Repeating Chara ...

  9. C++的一些知识点汇总

    数组形参 数组形参 void test(const int arr[]); //arr中的值不能被改变 void test(const int *arr); //arr中的值不能被改变,包括arr[1 ...

  10. java课程之团队开发冲刺阶段1.10

    一.总结昨天任务: 1.已完成系统规划总结 二.遇到的问题: 1,整合的过程中并没有的很好的处理其中的关系,应当将常用的方法总结成一个工具类便于使用.这样在二次使用的时候会便捷不少. 三.今天的任务 ...