On the cascading context and stacking order of CSS

About CSS cascading contexts and cascading style issues

Recently in the project encountered a let me want to die of the problem, I gave the project picture set a fade effect, a few opacity changes, but when I have a positioning element on it, the end of the animation, the positioning element is obscured, baffled, Google Day, only know is the cascade context, Stacking order to get ghosts, so here to write down the results of the search, help yourself, also help to see the pot friends.

Here to put an explanation of the very detailed address, if you don't understand, you can poke here OH

What is the first stacking context?

Cascading context, called "stacking context" in English. is a three-dimensional concept in HTML. If an element contains a cascading context, then he will have a higher z-axis than the other elements. Can be understood as being in the same area of a Web page. If there are two elements overlapping, then the element that contains the cascading context must be overlaid on top without cascading context elements.

So what is the stacking order?

The "stacking order" is called "stacking order" in English. Indicates that the element has a specific vertical display order when the cascade occurs, and that the stacking order is a cascading rule. I want to know about the CSS children's shoes must know that the elements on the page are hierarchical level. background/border< negative z-index<block blocky horizontal box <float floating box <inline/inline-block horizontal box <z-index:auto or as Z-inde :0< is z-index;

Yes, this is the stacking order, but this is only the stacking order of the css2.1 era, when CSS3 appeared, there are some egg pain, I encountered the problem is CSS3 animate properties brought about by the cascading context of the impact of the change;
Here are some of the cascading guidelines and cascading context features, and with this in addition to the new cascading context attributes that CSS3 brings, it's not hard to send out where our problems appear;

The following two are the golden rules for cascading fields. The overlay relationship follows the following 2 guidelines when an element is stacked:

1. who is big on: when there is a clear cascading identity, such as the Z-index value, in the same cascading context, the cascade horizontal value of the large overlay of the horizontal value of the small one.
2. Catch up : when the elements cascade horizontally and the stacking order is consistent, the elements that are in the back of the DOM flow overwrite the preceding elements.

Cascading context elements have the following characteristics:

1. Cascading contexts are stacked horizontally higher than ordinary elements (in the css2.1 era, cascading context elements should be the element with positional properties)
2. Cascading contexts can block mixed patterns of elements
3. Cascading contexts can be nested, and the inner cascade context and all its child elements are subject to the outer stacking context
4. Each cascading context and sibling element is independent, that is, when cascading changes or rendering, only consider the descendant elements
5. Each cascading context is self-contained, and when the elements cascade, the entire element is considered to be in the cascade order of the parent cascade context.

Now let's look at the cascading context of CSS3 and the new era.

1. z-indexThe value is not an auto flex item (parent element display:flex|inline-flex ).
2. The value of the element opacity is not 1.
3. The value of the element transform is not none .
4. The element mix-blend-mode value is not normal .
5. The value of the element filter is not none .
6. The value of the element isolation is isolate .
7. will-changeThe specified property value is any one of the above.
8. The element is -webkit-overflow-scrolling set to touch .

Conclusion:
It is not difficult to see, my problem is out of the opacity and Dom in the order, in the picture set fade-in is, the change is its Opacity property, so it becomes a cascade on the context element, and my text is above it, and not set the Z-index property, Naturally, when its opacity attribute becomes 1, the text is obscured.

Finally, I hope this article is helpful to everyone. Colleagues again posted I think more detailed explanation of a blog for your reference, Poke here

On the cascading context and stacking order of CSS