在最近的工作中，发现了一个问题，当不透明属性被用来实现页面的整体透明度时，如果两层重叠，使用不透明属性和属性值小于1的层将覆盖后面的层，所以做了一个实验来验证不透明级别。

在网页中的栈的规则是这样的：如果两层不确定位置属性为绝对或相对的属性，这层的HTML代码放在后面，这层显示它。如果位置属性被指定和z-index属性设置的值大，谁就。

发现问题

对于普通的层，不激活的Z，如果这层使用一个属性值小于1的不透明度属性，这层将显示它。让我们做一个演示，代码如下：

CSS代码将内容复制到剪贴板。





不透明度级联问题

html {填充：40px；}
。DD {宽度：100px；身高：100px；}
背景：红色；}

B {背景：蓝色；margin-left: 20px；边距：- 80px；}

C {背景：绿色；margin-left: 40px；边距：- 80px；}













保存HTML文件打开后，您可以看到正常的顺序。


在这个时候，我们有一个神奇的东西，加属性的不透明度：0.9到#，涵盖其他两层。


只有当一个小于1的不透明度值设置一层（如# C），例如，0.8，可以# C被安装在高于正常规则的#。


这样，增加了一个不到1的不透明属性，并提高了级别。至于内部的科学原理，我不认为它可能是一个小错误。但有时这是我们不希望发生的。

解决问题

那么如何解决这个问题呢正如我之前提到的，在正常情况下，该层指定位置和指定的Z值比普通层较高水平。那么指定不透明度和指定位置的层的级别是多少让我们在# B和位置看：relative.the风格的代码在这个时间如下：

CSS代码将内容复制到剪贴板。


#一{背景：红色；不透明度：0.9；}
B {背景：蓝色；margin-left: 20px；边距：- 80px；位置：相对；}

C {背景：绿色；margin-left: 40px；边距：- 80px；不透明度：0.8；}




当您保存刷新时，您看到的效果是：


也就是说，属性层相对位置，可使水平和相同的不透明度，然后堆叠显示按正常排序（在实验中，以后我也有测试结果的绝对属性和性能相同的相对属性值）。当我们取消了# C不透明度属性，我们可以看到，# C放在底层。


没有完成，位置：相对属性被激活只有# B之前，并没有集中使用。我们已经建立# B Z指数（例如，100），很明显，# B已成为顶级。



得出结论uff1a

一个绝对定位和相对定位的层属性值将在一个更高的水平比普通层。小于1的不透明层的财产的使用，也高于一般水平，指定位置，层与层，但不支持z-index属性，所以指定位置层，你可以使用z-index属性小于1层的不透明度属性覆盖。