这篇文章主要介绍“如何解决CSS3的opacity属性带来的层叠顺序问题”，在日常操作中，相信很多人在如何解决CSS3的opacity属性带来的层叠顺序问题问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何解决CSS3的opacity属性带来的层叠顺序问题”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
专注于为中小企业提供成都做网站、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业华池免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题。如果两个层发生了重叠，使用了 opacity 属性并且属性值小于1的层，会覆盖掉后面的层。于是动手做了个实验，来验证 opacity 的层次。
网页中的层叠规律是这样的：如果两个层都没有定义 position 属性为 absolute 或者 relative 属性，哪个层的HTML代码放在后面，哪个层就显示在上面。如果指定了 position 属性，并且设置了 z-index 属性，谁的值大，谁就在上面。
发现问题
而对于没有激活 z-index 的普通层来说，如果那个层使用了属性值小于1的 opacity 属性，哪个层就会显示在上面。我们做一个Demo。代码如下：
CSS Code复制内容到剪贴板
带有 opacity 的层叠问题
-
