Opacity in CSS affects the resolution of index change problem

This article mainly introduces the CSS in the opacity settings affect the index (number of layers) of the problem, through a variety of situations arising from the problem is summed up and attached to the code, the specific steps you can see the detailed explanation below, interested in the small partners can refer to.

When using the Opacity property to achieve the overall transparency of the page, a problem was found. 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.

Cascading issues raised by the Opacity property

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:

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


The normal cascade

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


Plus the cascade after opacity of less than 1

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.


Assign a value to another layer at the same time opacity

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.

To resolve a problem by defining the properties of the position

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:


Cascading effects after using the Position property on a layer

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.


Effect on the underlying cancellation of the Opacity property

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.


Effect of setting z-index on the middle layer

Cascading problem Summary

A layer with the position attribute value of absolute, relative, will be higher than the normal level. 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, you can use the Z-index property to overwrite the layer with the opacity property of less than 1 。 ”