处理CSS3的opacity特性带来的堆叠次序难题

2021-01-20 06:12 jianzhan

在近期的1个著作中,在应用 opacity 特性来完成网页页面总体全透明的情况下,发现了1个难题。假如两个层产生了重合,应用了 opacity 特性而且特性值小于1的层,会遮盖掉后边的层。因而动手能力做了个试验,来认证 opacity 的层级。

网页页面中的堆叠规律性是这样的:假如两个层都沒有界定 position 特性为 absolute 或 relative 特性,哪一个层的HTML编码放在后边,哪一个层就显示信息在上面。假如特定了 position 特性,而且设定了 z-index 特性,谁的值大,谁就在上面。

发现难题

而针对沒有激活 z-index 的一般层来讲,假如那个层应用了特性值小于1的 opacity 特性,哪一个层就会显示信息在上面。大家做1个Demo。编码以下:

CSS Code拷贝內容到剪贴板
  1.  <!DOCTYPE html>   
  2.  <html>   
  3.  <head>   
  4.  <title>带有 opacity 的堆叠难题</title>   
  5.  <style>   
  6.  html{padding:40px;}   
  7.  .dd{width:100px;height:100px;}   
  8. a{background:red;}   
  9.   
  10. b{background:blue;margin-left:20px;margin-top:-80px;}   
  11.   
  12. c{background:green;margin-left:40px;margin-top:-80px;}   
  13.   
  14. </style>   
  15. </head>   
  16. <body>   
  17. <div id=”a”></div>   
  18. <div id=”b”></div>   
  19. <div id=”c”></div>   
  20. </body>   
  21. </html>  

储存为 html 文档开启以后,能够看到一切正常的顺序

这时候候,大家为 #a 再加特性 opacity:0.9 奇异的事儿产生了,它遮盖了此外两个层

仅有当为另外一个层(比如:#c)也设定1个小于1的opacity值(比如:0.8)以后,后边的 #c 才可以安裝一切正常的标准遮盖在 #a 上面。

这样,提升了小于1的 opacity 特性的层,上升了1个层级。至于里边的科学研究基本原理,我沒有想搞清楚,也许也将会是1个小BUG。可是有时这类状况是大家不期待产生的。

处理难题

那末怎样来处理这个难题呢?前面也说过了,一切正常的状况下,特定了 position 而且特定了 z-index 值的层,有着比一般层更高的层级,那末特定 opacity 的层和特定了 position 的层相比呢?大家对 #b 再加 position:relative 看看。这时候候的款式编码以下:

CSS Code拷贝內容到剪贴板
  1.  #a{background:red;opacity:0.9;}   
  2. b{background:blue;margin-left:20px;margin-top:-80px;position:relative;}   
  3.   
  4. c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}  

储存更新后,看到实际效果是这样的:

也便是说,对层应用 position 特性的 relative 以后,可使其层级和 opacity 同样,这样以后,依照一切正常的排列开展堆叠显示信息(在后边的试验中,我对 absolute 特性值也做了检测,結果和 relative 特性值主要表现的同样)。当大家撤销了 #c 的 opacity 特性以后,大家能够看到,#c 被排在了最下面。

都还没完,以前只是对 #b 激活了position:relative 特性,都还没应用 z-index。大家对 #b 开展了 z-index 的设定(比如:100),很明显的,#b 变成了最高层。


得出结果:

应用了position特性值为 absolute、relative 的层,可能比一般层更高层级。应用了小于1的opacity特性的层,也比一般层更高层级而且和特定 position 的层同层,可是不适用 z-index 特性,因此特定 position 的层,可使用 z-index 特性,来遮盖带有小于1的 opacity 特性的层。