An easy-to-understand CSS cascade sequence and cascading context research

Stacking order and cascading context are two concepts, but they have an inseparable relationship, stacking order is very simple ^_^, serious thinking can be, and the stack context is insignificant, I just need to move the red line you understand, all said, is too simple. The first paragraph is difficult to understand, mainly with this article, only to resolve the displacement. Talk less, see the sword.

In consideration of the possibility that two elements overlap, the concept of Cascade refers to how to cascade another element, such as the two elements coincident when should let who in front, who is behind. And what are their rules? Let's try the water first.

Cascade Order Chapter

When two elements are block-level elements, the higher the level of the elements that follow by default

item11111item22222

Can see item2 put item1 to cover, the more behind the element hierarchy, the other item1 text or faint can be seen, this shows that the background of the hierarchy than the text is small.

Besides, we can do this.

item11111

It can be seen as if there is no item2 this element, the main reason is that, without setting the background, the background of the element is transparent (transparent), and the subsequent elements are allowed to penetrate.

Under these conditions, you will find a very funny thing, as follows:

I'm item2.

If you don't look at the code, it's like the code is really item2.

When two elements are inline blocks

Item1111item2

It is also the level of the latter element that is higher than the previous element's level, but unlike two block-level elements, the background level of the inline block element is higher than the text.

When two elements are in-line elements

Item1item2

Like the behavior of inline blocks, the background level is higher than the text, and the latter element is higher than the previous element level.

Small summary

When two elements are normal flows, by default the latter element is higher than the previous element level and allows subsequent elements to penetrate.

If two elements are block-level elements, the text is higher than the background level (so whether or not background text is set is always transparent).

In the inline or inline block, the background is higher than the text level (so as long as the background is set, the latter element will not penetrate).

When one element is a block-level element and the other is an inline block

Item1item2

The inline block is higher than the block-level element level, and the text is still higher than the background level.

If the other element is an inline element and the effect is the same, the code is as follows:

Item1item2

When an element is an inline block and another is an inline element.

Item1item2

The inline element level is higher than the inline block element and the background is higher than the text level.

Floating series

Floating and floating, the latter one higher than the previous one.

Floating and block elements, high floating levels.

Floating and inline blocks, high in-line block level.

Floating and inline, high within the row hierarchy.

The effect is as follows:

Stacking Order Summary

When the two element types are the same, by default the latter element level is higher than the previous element level.

Without setting the background, the background of the element is transparent and allows subsequent elements to penetrate.

The text level is higher than the background level for block elements and any other except positioned elements.

Floating and block elements, high floating levels.

Floating and inline blocks, high in-line block level.

Floating and inline, high within the row hierarchy.

Positioning and positioning, a high level of the latter element.

Positioning is higher than all element levels.

Their order: less than 0 Z-index < block < floating < inline block < inline < positioning < greater than 0 Z-index

cascading contexts

If you read the last section seriously, it would be strange to know that in no particular case why the positioning element is always higher than the normal element level, and the other point is, in most cases, why the latter element is always higher than the previous element level, and the culprit is the cascading context.

There is a three-dimensional concept in HTML, that is, we face the computer screen at this end of the z axis.

The elements that have cascading contexts will be closest to the user, that is, the more they are ahead of the z-axis. By default, only the root element HTML produces a cascading context, and once the element uses some attributes it will also produce a cascading context, such as our usual positional properties. such as the two cascade context encounters, always the back one before a cascade, unless you use Z-index to change. As follows:

Box1    Box2

Although item produces a cascading context, it does not affect its parent element. Its parent element is still stacked by the box2. The above also says that as long as the element that produces the cascading context is always higher than the other element layer, as follows:

Just add a background to the item, and the previous case just doesn't see the item element because the background is transparent by default and allows the following elements to penetrate.

In addition to locating elements that can create cascading contexts, there are several properties that you can do as well. The following are from MDN

root element (HTML),

The Z-index value is not an absolute/relative positioning of "auto",

A Flex project (Flex Item) with a Z-index value other than "auto", that is: parent element Display:flex|inline-flex,

Opacity element with property value less than 1

The Transform property value is not an element of "none",

The Mix-blend-mode property value is not an element of "normal",

The filter value is not an element of "none",

The perspective value is not a "none" element,

The isolation property is set to the element "isolate",

Position:fixed

Any CSS properties are specified in Will-change, even if you do not directly specify the values of these properties

The-webkit-overflow-scrolling property is set to the "touch" element

Here, take opacity and try the water.

Opacitybox2

Originally should be box2 Cascade Box1, but because Box1 created a cascade context, so the box2 cascade.

Know what the cascading context is for?

The biggest benefit is that when you want to change the hierarchy of elements and don't want to use positioning, you can also use a lot of other methods. As follows:

The original float is higher than the block element level, but when opacity is used, the block element level is higher than the floating level, and the code is as follows:

Floatopacity

Summarize

The element that created the cascading context is higher than the other element hierarchy.

When two cascading contexts meet, the latter level is high. If you want to change the hierarchy, you can use Z-index

