使用了position属性值为 absolute、relative 的层，将会比普通层更高层次。使用了小于1的opacity属性的层，也比普通层更高层次并且和指定 position 的层同层，但是不支持 z-index 属性，所以指定 position 的层，可以使用 z-index 属性，来覆盖带有小于1的 opacity 属性的层。

想法：可以使用position：relative 来覆盖opacity小于的元素。

避免：尽量避免在下拉菜单使用透明度，可改用更换颜色的形式。

opacity层叠问题的更多相关文章

  1. 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  2. CSS——关于z-index及层叠上下文（stacking context）

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  3. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  4. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  5. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  6. 层叠上下文(The stacking context)

    MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...

  7. CSS中 opacity的设置影响了index（层数）的改变

    在使用 opacity 属性来实现页面整体透明的时候,发现了一个问题.如果两个层发生了重叠,使用了 opacity 属性并且属性值小于1的层,会覆盖掉后面的层.于是动手做了个实验,来验证 opacit ...

  8. 层叠上下文 Stacking Context

    层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...

  9. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

随机推荐

  1. Scala 学习笔记之函数(2)

    class OldStudent extends Student { def filterName(s: String, f: String => String) = { if (s != nu ...

  2. web前端之移动端：知识汇

    移动前端自适应适配方法总结 移动端前端适配方案(总结) -- 面试重点 不要再问我移动适配的问题了 一.响应式布局: // Extra small devices (portrait phones, ...

  3. Docker4-docker私库的搭建及常用方法-docker-registry方式

    一.简单介绍 前面已经介绍,可以使用Docker Hub公共仓库,但是大多数情况企业都需要创建一个本地仓库供自己使用.这里介绍几种搭建私库的方法 私库的好处有几点 1.节约带宽 2.可以自己定制系统 ...

  4. 【windows】远程桌面 把远程服务器的explorer.exe进程关掉了，咋办？

    在操作windows2008R2服务器时不小心把explorer.exe进程关闭了,瞬间整个界面就蓝色了. 重启,做不到,各种快捷键用不了,最后发现Alt+Tab可以用,刚好打开了IIS, 打开其中一 ...

  5. 服务器时间误差导致的google sign-in后台验证错误（远程调试java程序）

    https://developers.google.com/identity/sign-in/web/backend-auth import com.google.api.client.googlea ...

  6. jQuery.noConflict()解决imgBox.js依赖jquery版本问题

    jQuery提供两种点击图片放大效果出处 在使用imgbox.js是出现的jquery版本不兼容问题,之后了解到jQuery.noConflict()的用法 jQuery.noConflict()的存 ...

  7. 分库分表(7)--- SpringBoot+ShardingSphere实现分库分表 + 读写分离

    分库分表(7)--- ShardingSphere实现分库分表+读写分离 有关分库分表前面写了六篇博客: 1.分库分表(1) --- 理论 2.分库分表(2) --- ShardingSphere(理 ...

  8. FLask中蓝图(用于分文件)

    一,不使用蓝图,自己分文件 目录结构 -templates -views -__init__.py -user.py -order.py -app.py app.py from views impor ...

  9. javascript input只输入数字和字母

    <input type="text" placeholder="请输入您的用户名..."> <script type="text/j ...

  10. c++异常处理的方法

    c++异常处理 程序运行时常会碰到一些异常情况,例如:做除法的时候除数为 0:用户输入年龄时输入了一个负数:用 new 运算符动态分配空间时,空间不够导致无法分配:访问数组元素时,下标越界:打开文件读 ...