What is a cascading context

A cascading context is the three-dimensional concept of HTML elements that extend along an imaginary Z-axis relative to the user facing a window or web page, occupying the space of the cascading context in order of priority according to their own attributes.

So there is often more than one cascading context on a page (because there are many ways to generate cascading contexts), and within a cascading context we stack elements at a cascading level.

We can classify the conditions that trigger a cascading context into three broad categories:

The cascading context is created by default

  • The root element HTML

This is why absolute positioning elements are positioned relative to the browser window when left/top equivalents are positioned, if no other positioning elements are restricted.

You need to create a cascading context with the Z-index trigger

  • An absolute/relative/absolute position whose z-index is not “auto” creates a cascading context
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        background: pink;
        height: 100vh;
    }
    .box {
        width: 160px;
    }
    .box1 {
        position: relative;
        left: 0;
        top: 0;
        z-index: 1;
        background: blue;
        height: 160px;
    }
    .box2 {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        background: gray;
        height: 180px;
    }
    .box3 {
        position: fixed;
        z-index: 0;
        background: greenyellow;
        left: 0;
        top: 0;
        height: 200px;
    }
    .box4 {
        height: 220px;
        background: orange;
    }
</style>
 <div class="container">
    <div class="box1 box"> z-index: 1</div> <div class="box2 box"> absolute position, z-index: -1</div> <div class="box3 box"<div > <div class= "z-index: 0"box4 box"</div> </div>Copy the code

  • Flex item (parent element display for flex | inline – flex), pay attention to is a child element, not the parent element to create cascading context
<style> * { margin: 0; padding: 0; } .box { display: flex; background: pink; } .box > div { background-color: blue; z-index: 1; }.box > div > img {position: relative; z-index: -1; right: -150px; } </style> <div class="box">
    <div>
        <img src="mm.png">
    </div>
</div>
Copy the code

You do not need to create a cascading context with z-index triggering

In this case, it is basically triggered by new attributes in CSS3.

  • Z-index is triggered if any element with a opacity property value less than 1
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box { background-color: blue; opacity: 0.5;  }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
 <div class="box">
    <img src="mm.png">
</div>
Copy the code

  • Elements whose transform property value is not “None”
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
        transform: rotate(15deg);
    }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
<div class="box">
    <img src="mm.png">
</div>
Copy the code

  • Elements whose mix-blending-mode attribute value is not “normal”
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
        mix-blend-mode: darken;
    }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
<div class="box">
    <img src="mm.png">
</div>
Copy the code

  • Elements whose perspective value is not “None”
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
        perspective: 250px;
    }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
 <div class="box">
    <img src="mm.png">
</div>
Copy the code

  • Filter and cascading context
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
        filter: blur(5px);
    }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
 <div class="box">
    <img src="mm.png">
</div>
Copy the code

  • The isolation property is set to elements of “ISOLATE”
  • Arbitrary CSS properties are specified in will-change, even if you don’t specify their values directly
  • -webkit-overflow-scrolling for the elements set to “touch”

What are cascading levels

A DOM element, without considering cascade context, can according to the cascade levels decision elements in the order shown on the z axis, easy to understand, different DOM elements together overlap, they display order will follow the rules of cascade levels and z – the index is used to adjust the display order of an element Allows the element to float up and down.

- In the same cascade context, the level of the cascade makes sense - Z-index has the highest priorityCopy the code

Compares the display order of two DOM elements

  • If in the same cascading context, display elements according to the rules of the cascading level
  • If the context is different, first find the common ancestor and then compare the level of the local context in which the two elements reside under the common context.

Recommend learning

  • Video: CSS in-depth understanding of z-index
  • Cascading context
  • In-depth understanding of cascading context and cascading order in CSS

Note: It was released in a hurry.