在近期的1个著作中,在应用 opacity 特性来完成网页页面总体全透明的情况下,发现了1个难题。假如两个层产生了重合,应用了 opacity 特性而且特性值小于1的层,会遮盖掉后边的层。因而动手能力做了个试验,来认证 opacity 的层级。
网页页面中的堆叠规律性是这样的:假如两个层都沒有界定 position 特性为 absolute 或 relative 特性,哪一个层的HTML编码放在后边,哪一个层就显示信息在上面。假如特定了 position 特性,而且设定了 z-index 特性,谁的值大,谁就在上面。
发现难题
而针对沒有激活 z-index 的一般层来讲,假如那个层应用了特性值小于1的 opacity 特性,哪一个层就会显示信息在上面。大家做1个Demo。编码以下:
储存为 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 看看。这时候候的款式编码以下:
储存更新后,看到实际效果是这样的:
也便是说,对层应用 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 特性的层。