关于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 ...
随机推荐
- Maven - 工作原理
章节 Maven – 简介 Maven – 工作原理 Maven – Repository(存储库) Maven – pom.xml 文件 Maven – 依赖管理 Maven – 构建生命周期.阶段 ...
- 兼容iphonex底部那个
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ra ...
- 基于图灵api的Python机器人
一.注册图灵机器人 先注册并登录图灵机器人官网: 点击创建机器人 复制机器人的key 二.搭建Python机器人 Python版本:3.6 注意替换第三行代码的apikey import reques ...
- h5-transform-3d
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python说文解字_Python之多任务_01
Python 之 多任务: Python之多任务是现在多任务编程运用Python语言为载体的一种体现.其中涵盖:进程.线程.并发等方面的内容,以及包括近些年在大数据运算.人工智能领域运用强大的GPU运 ...
- Python时间问题
获取当前的时间,time只能精确到秒,而datetime可以精确到毫秒,所以使用格式化的时候要注意. nowTime=time.localtime((time.time())) t=time.strf ...
- VNC viewer 无法打开oracle 11g图形界面方案
VNC viewer 无法打开oracle 11g图形界面方案 1.检查交换空间失败 检查交换空间:可用的交换空间为35MB,所需的交换空间为150MB.未通过 创建swapfile: root权限下 ...
- openlayers基础用例
http://weilin.me/ol3-primer/ch03/03-01.html#http://weilin.me/ol3-primer/ //地址http://openlayers.org/ ...
- POJ 3660 Cow Contest【Floyd 传递闭包】
传送门:http://poj.org/problem?id=3660 题意:有n头牛, 给你m对关系.(a, b)表示牛a能打败牛b, 求在给出的这些关系下, 能确定多少头牛的排名. 传递闭包: 关系 ...
- MongoDB_走一波
Mongodb 一.mongodb的介绍 mongodb的优势 易扩展:NoSQL数据库种类繁多,但是一个共同的特定就是去掉关系数据库的关系型特性.数据之间无关系,这样非常容易扩展 大数据,高性能:N ...