关于css中hover下拉框的一个bug
写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的更多相关文章
- 选择屏幕中的下拉框和dialog中下拉框设计
REPORT YTEST014. PARAMETERS: auart LIKE vapma-auart AS LISTBOX VISIBLE LENGTH 6. AT SELECTION-SC ...
- ASP.NET MVC中的cshtml页面中的下拉框的使用
ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- 商品类型的下拉框绑定一个事件,通过ajax获取属性
html代码这么写 <!-- 商品属性 --> <table cellspacing="1" cellpadding="3" width=&q ...
- 用css写出下拉框(代码转自wq群)
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框. <style>/* css*/ #body{ float: left; } #xialakuang{ background- ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- Excel中添加下拉框
数据->数据验证->数据验证 设置—>允许下拉框中选择序列,来源中写下拉选项,每个选项之间用逗号隔开
- 在angular中实现下拉框的两种方式 ng-repeat和 ng-option
1. ng-repeat实现下拉框: select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 实现源码 <!DOCTYPE html> <html&g ...
随机推荐
- 模块化CommonJs规范 part1
CommonJS规范 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 1.概述 Node 应用由模块组成,采用 CommonJS 模块规范. 每个文件就是一个模块, ...
- Sequence Models Week 1 Improvise a Jazz Solo with an LSTM Network
Improvise a Jazz Solo with an LSTM Network Welcome to your final programming assignment of this week ...
- Sequence Models Week 1 Character level language model - Dinosaurus land
Character level language model - Dinosaurus land Welcome to Dinosaurus Island! 65 million years ago, ...
- Git--rebase合并提交
参考 https://blog.csdn.net/hj7jay/article/details/78809547 https://blog.csdn.net/yangcs2009/article/de ...
- shell下32位随机密码生成
最简单的两个 参考 zzx@zzx120:~$ date | md5sum|cut -c1-790cdbd8 zzx@zzx120:~$ echo `< /dev/urandom tr -d ...
- transform—3D立方体
1.思路分析 第一步:首先需要一个大盒子,承载立方体的六个面: 第二步:立方体的六个面需要3D转化在特定的位置,拼接成一个立方体: 第三步:设置动画: 2.代码实现 第一步:创建div并且设置样式: ...
- SPOJ 3883. LATGACH3/ UVA 10918
用1*2的方块去覆盖3*n的方块 http://www.cnblogs.com/staginner/archive/2011/12/16/2290020.html 玉斌大神的题解 其实我昨晚想得跟斌神 ...
- MySQL性能管理及架构设计:第2章 什么影响了MySQL性能
第2章 什么影响了MySQL性能 2-1 影响性能的几个方面 1.服务器的硬件 2.服务器的操作系统 3.数据库的存储引擎 4.数据库的参数配置 5.数据库表结构设计和SQL语句的编写和优化 2-2 ...
- 使用Matplotlib
1.Matplotlib是python的一个绘图库. 2.from matplotlib import pyplot as plt
- 2020/1/28 PHP代码审计之命令执行漏洞
0x00 命令执行漏洞原理 应用程序有时需要调用一些执行系统命令的函数,如在PHP中,使用system.exec.shell_exec.passthru.popen.proc_popen等函数可以执行 ...