解决CSS3的opacity属性带来的层叠顺序问题

2020-05-03 10:54:19易采站长站整理

 #a{background:red;opacity:0.9;}   
b{background:blue;margin-left:20px;margin-top:-80px;position:relative;}   
  
c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}  

保存刷新后,看到效果是这样的:
201659115005366.png (266×223)

也就是说,对层使用 position 属性的 relative 之后,可以使其层次和 opacity 相同,这样之后,按照正常的排序进行层叠显示(在后面的实验中,我对 absolute 属性值也做了测试,结果和 relative 属性值表现的相同)。当我们取消了 #c 的 opacity 属性之后,我们可以看到,#c 被排在了最下面。
201659115026857.png (244×235)

还没有完,之前只是对 #b 激活了position:relative 属性,还没有使用 z-index。我们对 #b 进行了 z-index 的设置(例如:100),很显然的,#b 成为了最顶层。
201659115042775.png (217×215)

得出结论:

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