Why doesn't the z-index you set take effect?

I believe everyone is familiar with the z-index CSS property, which is usually used to control the display (cascading) order between two or more elements when they overlap.

Why is z-index set but it doesn't take effect?

Let's look at this example. Why is the z-index of box1 set to be larger than the z-index value of box2 , and why box1 is not displayed on top of box2.

/* css */
.box1{
    
    
    z-index: 10;
    background-color: red;
}
.box2{
    
    
    z-index: 5;
    background-color: blue;
    margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>

insert image description here

cascading context

The reason why the z-index you set does not take effect is because the elements you set do not form a stacking context . So what is a stacking context? You can understand that, under normal circumstances, html elements are arranged left and right, which is equivalent to being arranged along the x and y axes. Then the cascading context introduces a concept of z axis for us. If we are facing the browser (page), The line between the browser and the user is the z-axis.
When elements form a stacking context, you can set the value of z-index to control the stacking order of elements on the z-axis to achieve the effect of "covering" between elements

generate cascading context

The cascading context can be generated through the following common properties

The value of position is not static (note that z-index cannot be auto when the value is absolute or relative)
display: flex; child elements of the layout, and the value of z-index cannot be auto
display: grid; child elements of the layout, and the value of z-index cannot be auto
elements with an opacity value less than 1
The value of transform is not none
The value of perspective is not none
The value of filter is not none

Look at an example: the value of z-index is valid because the value of position is set.

<!-- css -->
.box1{
    
    
    z-index: 10;
    background-color: red;
    position: relative;
}
.box2{
    
    
    z-index: 5;
    background-color: blue;
    margin-top: -50px;
}
/* html */
<div class="box1">box1</div>
<div class="box2">box2</div>

insert image description here

at last

Look at an example:

/* css */
.box{
    
    
    width: 200px;
    height: 100px;
    background-color: red;
    color: #fff;
    z-index: 5;
    position: relative;
}
.box1{
    
    
    width: 120px;
    height: 50px;
    background-color: green;
    color: #fff;
    position: relative;
    z-index: 10;
}
.box2{
    
    
    width: 120px;
    height: 50px;
    background-color: rgb(70, 0, 128);
    color: #fff;
    position: relative;
    z-index: 7;
    margin-top: -10px;
    padding-top: 10px;
}
.box3{
    
    
    width: 120px;
    height: 100px;
    background-color: blue;
    color: #fff;
    margin: -70px 0 0 90px;
    position: relative;
    z-index: 6;
    text-align: right;
}
/* HTML */
<div class="box">
    <div class="box1">z-index: 10</div>
    <div class="box2">z-index: 5</div>
</div>
<div class="box3">z-index: 4</div>

insert image description here

box, box1, box2, and box3 are each a stacking context. The stacking context of box contains box1 and box2, indicating that the stacking context can contain stacking contexts.
The z-index value of box is smaller than the z-index value of box3, so box3 covers the box and is displayed on the upper layer. However, the z-index values of box1 and box2 are greater than the z-index value of box3, but they are also covered by box3 and displayed on the lower layer. The stacking relationship of elements is limited by the parent element, in other words, the stacking order of two elements is not affected by the z-index size of the child element.

Tip: How to check whether elements have formed a cascading context?

Use the tool Edge browser, F12 and select the 3d view tab. Check the option shown in the figure below. When the element has a z-index value, it means that a stacking context is formed.

insert image description here