A solution to the cascade order problem caused by the opacity property of CSS3

This article mainly introduces the method of solving the Cascade order problem caused by the opacity attribute of CSS3, mainly for the opacity of the attribute value of less than 1 layer will cover the other layers above the problem, need friends can refer to the next

In a recent work, a problem was found when using the opacity attribute to achieve overall page transparency. If two layers overlap, a layer with the opacity attribute and a property value of less than 1 will overwrite the back layer. So I did an experiment to verify the level of opacity.

The cascading pattern in a Web page is this: If two layers are not defined position attribute is absolute or relative attribute, which layer of HTML code is placed behind, which layer is displayed above. If the position property is specified, and the Z-index property is set, who has the value, who is on top.

Discover problems

For the normal layer without activating z-index, if that layer uses a opacity attribute with a property value of less than 1, which layer is displayed above. Let's do a demo. The code is as follows:

<! DOCTYPE html>    


After saving as HTML file opens, you can see the normal order

At this time, we add attributes to the #a opacity:0.9 magical things happen, it covers the other two layers

After a opacity value of less than 1 (for example: 0.8) is set for another layer (for example: #c), the following #c can install the normal rule over the #a.

In this way, a layer with a opacity attribute of less than 1 is added, raising a level. As for the scientific principle inside, I did not want to understand, perhaps also is a small bug. But sometimes this is something we don't want to happen.

Solve the problem

So how to solve this problem? As I said before, under normal circumstances, you specify a layer of position and specify a Z-index value, and have a higher level than the normal layer, then the specified opacity layer is compared to the layer that specifies position. Let's have a look at #b plus position:relative. The style code 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 the refresh, see the effect:


That is, after using the relative of the position property on the layer, you can make the hierarchy and opacity the same, and then cascade the display according to the normal sort (in the later experiment, I have also tested the absolute attribute values, and the results and relative The property values behave the same). When we cancel the Opacity property of the #c, we can see that the #c is ranked at the bottom.

Not yet finished, the position:relative attribute was activated only for #b, and no z-index was used. We set the #b Z-index (for example: 100), and it is clear that #b has become the topmost layer.


concluded that:

The 
 uses the Position property value of absolute, relative, and will be a higher level than the normal layer. A layer with a opacity attribute less than 1 is used, which is higher level than the normal layer and is the same layer as the layer of the specified position, but does not support the Z-index property, so specify the position layer, which can use the Z-index property to overwrite the layer with the opacity property of less than 1.