使用了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. Kubernetes 系列（三）：Kubernetes使用Traefik Ingress暴露服务

    一.Kubernetes 服务暴露介绍 从 kubernetes 1.2 版本开始,kubernetes提供了 Ingress 对象来实现对外暴露服务:到目前为止 kubernetes 总共有三种暴露 ...

  2. MYSQL SQL语句 之 select

    select语句在数据库操作中是操作频率最高的语句,使用方式也是多种多样,它的基本功能是:从表中选取数据,结果存储在一个结果集中.可以联合where,and,or,Order By,distinct, ...

  3. php微信支付v3版本签名生成

    前几天需要对接微信支付卡包营销活动需要对接微信新版SDKv3版 签名生成规则,微信的官方文档里面说明的还算可以吧,不过个人觉得不太理想- -.  自己调试的时候调试了半天才找了错误原因. https: ...

  4. SQL SERVER数据库基本语法汇总，仅代表个人整理，仅供参考

    以下SQL基本语法皆由本人整理,以下做一个汇总,关于游标,可作为了解,不要求掌握,其他查询.修改.删除操作等基本语法必须会使用.select * from [dbo].[TBICJE]select m ...

  5. Python中的可变对象与不可变对象、浅拷贝与深拷贝

    Python中的对象分为可变与不可变,有必要了解一下,这会影响到python对象的赋值与拷贝.而拷贝也有深浅之别. 不可变对象 简单说就是某个对象存放在内存中,这块内存中的值是不能改变的,变量指向这块 ...

  6. drf框架接口文档

    drf框架接口文档 REST framework可以自动帮助我们生成接口文档. 接口文档以网页的方式呈现. 自动接口文档能生成的是继承自APIView及其子类的视图. 一.安装依赖 pip insta ...

  7. Java描述设计模式(15)：责任链模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景描述 1.请假审批流程 公司常见的请假审批流程:请假天数 当 day<=3 天,项目经理审批 当 3<day<= ...

  8. Ubuntu安装时卡死在启动界面

    上下选中Install Ubuntu后,按'e'进入编辑页面(不要按回车),删除'quiet splash'之后的"---",输入"$vt_handoff acpi_os ...

  9. 上传漏洞之常见MIME类型

    常见的MIME类型 超文本标记语言文本 .html,.html text/html 普通文本 .txt text/plain RTF文本 .rtf application/rtf GIF图形 .gif ...

  10. 代码审计-thinkphp3.2.3框架漏洞sql注入

    开始复现审计一下tp3和tp5的框架漏洞,当个练习吧. 涉及注入的方法为where() table() delete()等. 环境 tp3.2.3 : 0x01 注入成因 测试代码: public f ...