This is the 19th day of my participation in the Genwen Challenge

What is a cascading context

Stacking Context:

It’s an imaginary concept, like when you look at a page, it looks like there’s only one layer, but there are many layers. If it is an element of a cascading context, it has priority access to our users. It seems so close to us.

Second, the z – index

To talk about the cascading context, we need to talk about the Z-index, which specifies the hierarchy of elements. When we specify the order of elements, we can change the order of elements by specifying z-index.

Note: Z-index is valid only for elements that specify the position attribute.

The higher the z-index value, the higher its priority, i.e., at the top.

If z-index is not specified, all elements are at the default level (level 0), for example

    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
Copy the code
    div {
        opacity: 0.7;
        position: relative;
    }
   
    #div1 {
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: absolute;
    }
    
    #div2 {
        width: 200px;
        height: 200px;
        background-color: rgb(234.0.255);
        margin-left: 50px;
        position: absolute;
        z-index: 1;
    }
    
    #div3 {
        width: 200px;
        height: 200px;
        background-color: rgb(255.187.0);
        margin-left: 100px;
        position: absolute;
        z-index: 2;
    }
Copy the code

Effect of 👇

Iii. Stacking Level

If a cascading context is a privilege to get close to us, then the cascading level determines the order in which elements in the same cascading context are displayed on the Z-axis.

The cascade level is not the z-index just mentioned, although z-index can affect the cascade level, but z-index only works on elements that have positioning. And the cascade level exists for all elements.

Why is there a cascading context

When we render a web page, it may not be rendered in a very short time because of network delays and other problems, that is to say, it may be rendered first part of the content, then we want to render the first part of the content must be important, so that the important content of the cascade order becomes high.

Elements of the cascading context

According to MDN, the elements of the cascading context include:

  • Document root element (<html>);
  • positionA value ofabsolute(Absolute position) or relative(Relative positioning) andz-indexValues are not forautoThe element;
  • positionA value offixed(fixed position) orstickySticky positioning elements (sticky positioning works on all browsers on mobile devices, but not on older desktop browsers);
  • flexChild elements of the container, andz-index Values are not forauto;
  • grid Child elements of the container, andz-indexValues are not forauto;
  • opacityElements whose attribute value is less than 1;
  • mix-blend-modeAttribute value is notnormalThe element;
  • Any of the following elements whose attribute value is not None:
    • transform
    • filter
    • perspective
    • clip-path
    • mask / mask-image / mask-border
  • isolationAttribute values forisolateThe element;
  • -webkit-overflow-scrollingAttribute values fortouchThe element;
  • will-changeValue sets any of the properties in thenon-initialValue creates elements for cascading context (see this article);
  • containAttribute values forlayout,paintOr the element containing the composite value of one of them.

Reference article:

MDN document

Zhang Xinxu “In-depth Understanding of cascading Context and Cascading Order in CSS”