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.