Home > Article > Web Front-end > Solution to the cascading order problem caused by the opacity attribute of CSS3
This article mainly introduces the method to solve the cascading order problem caused by the opacityproperty of CSS3. It mainly focuses on the problem that layers with an opacity property value less than 1 will cover other layers. It needs to Friends can refer to
In a recent work, when using the opacity attribute to achieve overall transparency of the page, a problem was discovered. If two layers overlap, the layer with the opacity attribute and the attribute value less than 1 will overwrite the subsequent layer. So I did an experiment to verify the level of opacity.
The cascading rule in web pages is like this: If neither layer has definition position attribute is absolute or relative attribute, which layer's HTML code is placed behind , which layer is displayed on top. If the position attribute is specified and the z-index attribute is set, the one with the larger value will be on top.
Found the problem
For ordinary layers that do not have z-index activated, if that layer uses an opacity attribute with an attribute value less than 1, which layer will shown above. Let's make a demo. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>带有 opacity 的层叠问题</title>
<style>
html{padding:40px;}
.dd{width:100px;height:100px;}
a{background:red;}
b{background:blue;margin-left:20px;margin-top:-80px;}
c{background:green;margin-left:40px;margin-top:-80px;}
</style>
</head>
<body>
<p id=”a”></p>
<p id=”b”></p>
<p id=”c”></p>
</body>
</html>After saving it as an html file and opening it, you can see the normal order
At this time, we are# a plus attribute opacity: 0.9 The magic happens, it covers the other two layers 
Only when another layer (for example: #c) is also set to a value less than 1 After the opacity value (for example: 0.8), the following #c can install normal rules to cover #a. 
In this way, a layer with an opacity attribute less than 1 is added, raising it to a higher level. As for the scientific principles inside, I haven't figured it out, maybe it's a small bug. But sometimes this is something we don't want to happen.
Solution to the problem
So how to solve this problem? As mentioned before, under normal circumstances, the layer with position and z-index specified has a higher level than the ordinary layer. So how does the layer with opacity specified compare with the layer with position specified? Let's add position: relative to #b and see. The style code at this time is as follows:
#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;}After saving and refreshing, you will see the effect like this:
In other words, after using the relative position attribute on a layer, the level can be the same as the opacity. After that, the cascading display will be performed according to the normal order (in the subsequent experiments, I also tested the absolute attribute value. The result behaves the same as the relative attribute value). When we cancel the opacity attribute of #c, we can see that #c is ranked at the bottom. 
It’s not over yet, I just activated the position: relative attribute for #b before, and I haven’t used z-index yet. We set the z-index of #b (for example: 100). Obviously, #b becomes the top level. 
Conclusion:
The layer using the position attribute value of absolute and relative will be higher than the ordinary layer level. The layer using the opacity attribute less than 1 is also higher than the ordinary layer and is the same layer as the layer with the specified position. However, it does not support the z-index attribute, so the layer with the specified position can use the z-index attribute to cover the band. Layers with an opacity property less than 1.
The above is the detailed content of Solution to the cascading order problem caused by the opacity attribute of CSS3. For more information, please follow other related articles on the PHP Chinese website!