在近期的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 特性的层。