Specific use of stacking context in CSS

Preface

Under the influence of some CSS interactions, z-index set for elements will not be superimposed according to the actual size. I have never understood the principle behind it. Recently, I have specially checked the relevant information and made a small summary.

Stacking context and stacking order

Stacking context is a three-dimensional concept in HTML, that is, the z-axis of the element. Stacking order refers to the specific vertical display order when stacking.

Cascading Criteria

Whoever is older goes first

When there is an explicit stacking level indication, such as an identified z-indx value, the one with the larger stacking level value overrides the one with the smaller stacking level value in the same stacking context.

Come from behind

When the stacking levels of elements are consistent and the stacking order is the same, the later elements in the DOM flow will cover the earlier elements.

Characteristics of stacking contexts

A stacking context has the following characteristics:

• The stacking context has a higher stacking level than ordinary elements;
• Stacking contexts can block an element's blending mode;
• Stacking contexts can be nested, and the inner stacking context and all its child elements are subject to the outer stacking context;
• Each stacking context is independent of its sibling elements, which means that when performing stacking changes or rendering, only descendant elements need to be considered;
• Each stacking context is self-contained. When an element is stacked, the entire element is considered to be in the stacking order of the parent stacking context.

When the z-index value is not auto, a stacking context is created

For positioned elements containing position: relative; position: absolute; as well as elements with position declarations in FireFox/IE browsers, a stacking context is created when its z-index value is not auto .

HTML Code

<div class="red-wrapper">
    <div class="red">Xiaohong</div>
</div>
<div class="gray-wrapper">
    <div class="gray">Little Gray</div>
</div>

CSS Code

.red-wrapper {
    position: relative;
    z-index: auto;
}

.red {
    position: absolute;
    z-index: 2;
    width: 300px;
    height: 200px;
    text-align: center;
    background-color: brown;
}

.gray-wrapper {
    position: relative;
    z-index: auto;
}  

.gray {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 300px;
    text-align: center;
    background-color: gray;
} 

When z-index of two sibling elements is auto , they are ordinary elements, and the child elements follow the principle of "whoever is bigger is on top", so the gray z-index: 1; loses to the red z-index: 2; and is pressed down.

However, when z-index becomes a numerical value, a stacking context is created, each stacking element is independent of each other, and the child elements are subject to the stacking order of the parent element. By changing z-index of sibling elements from auto to a value of 0 , the stacking relationship between their child elements will no longer be affected by their own z-index , but will be determined by z-index of the parent element.

z-index of the parent of Xiaohong and Xiaohui below is adjusted to 0

.red-wrapper {
    /* Other styles */
    z-index: 0;
}  

.gray-wrapper {
    /* Other styles */
    z-index: 0;
}

You will find that Xiaohui is above Xiaohong, because Xiaohui's parent and Xiaohong's parent have become stacking context elements with the same stacking level, according to the principle of "latter comes on top" of element position in the document flow.

CSS3's impact on stacking contexts

display: flex|inline-flex and stacking context

The parent is display: flex or display: inline-flex; and z-index of the child element is not auto . At this time, this child element (note that it is a child element here) is the stacking context element.

HTML Code

<div class="wrapper">
    <div class="gray">
        Little Gray<div class="red">Little Red</div>
    </div>
</div>

CSS Code

.wrapper {
    display: flex;
}

.gray {
    z-index: 1;
    width: 200px;
    height: 300px;
    text-align: center;
    background-color: gray;
}  

.red {
    z-index: -1;
    width: 300px;
    height: 200px;
    text-align: center;
    background-color: brown;
    position: relative;
}

In this way, because the parent of Xiaohui has display: flex; its own z-index is not auto , so it becomes a stacking context element, and the original Xiaohong bottom is replaced by Xiaohui.

mix-blend-mode and stacking context

An element with mix-blend-mode property is a stacking context element

The CSS property mix-blend-mode can blend the content and background of the superimposed element together.

The code is the same as above. Just add mix-blend-mode attribute to the gray. In order to see the blending effect, add a background image to the outer container.

.wrapper {
    background-image: url("./jz.png");
}

.gray {
    /* Other styles */
    mix-blend-mode: darken;
}

Similarly, Xiaohui has the mix-blend-mode attribute, which makes it a stacking context element, making Xiaohui the bottom element.

Opacity and stacking contexts

If opacity of an element is not 1, the element is a stacking context element.

HTML Code

<div class="gray">
    Little Gray<div class="red">Little Red</div>
</div>

CSS Code

.gray {
    z-index: 1;
    width: 200px;
    height: 300px;
    text-align: center;
    background-color: gray;
    opacity: 0.5;
}

.red {
    z-index: -1;
    width: 300px;
    height: 200px;
    text-align: center;
    background-color: brown;
    position: relative;
} 

Since the gray element has the opacity property, it becomes a stacking context element, so the red element z-index: -1; cannot penetrate it either.

Transforms and stacking contexts

The element to which transform is applied is the stacking context element

The code is the same as above, except that the transform is applied to the gray.

.gray {
    /* Other related styles */
    transform: rotate(30deg);
} 

Similarly, the gray element is transformed into a stacking context element by applying the transform transformation, so that the red element z-index: -1; cannot penetrate it either.

Filters and stacking context

An element with filter attribute is a stacking context element

The code is the same as above, except that filter attribute is added to Xiaohui.

.gray {

    /* Other related styles */
    filter: blur(5px);
} 

Similarly, the gray element has a filter attribute and becomes a stacking context element, so the red element z-index: -1; is still on top of the gray element.

will-change and stacking context

An element with will-change attribute is a stacking context element.

The code is the same as above, except that will-change attribute is added to the gray element.

.gray {
    /* Other related styles */
    filter: will-change;
}

The result is the same as above.

Summarize

To understand the element stacking rules in general, we must first understand when an element is a stacking context element.

• Elements with the positioning attribute position: relative|absolute|fixed; and whose z-index is not auto (webkit-based browsers, fixed positioning has no such restriction) are stacking context elements;
• Elements have some CSS3 properties that can become stacking context elements:
• The parent is display: flex|inline-flex; the z-index of the child element is not auto. At this time, this child element (note that it is a child element here) is the stacking context element
• Elements with the mix-blend-mode property
• Elements whose opacity attribute is not 1
• Elements with transform
• Elements with the filter attribute
• Elements with the will-change attribute

Secondly, we need to understand the stacking principle: "the bigger one goes on top", "the later one comes on top", and finally we need to understand the main characteristics of the stacking context (see the article Characteristics of the stacking context for details).

This is the end of this article about the specific use of stacking context in CSS. For more relevant CSS stacking context content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!