CSS stacking and z-index example code

Cascading and Cascading Levels

HTML elements are three-dimensional concepts. In addition to the horizontal and vertical directions, they are also stacked on the "z-axis".
Since it is a superposition, it involves the issue of order, which is called "cascading level" in the specification.
By default, images and text are the core of a web page, so the level of inline elements should be the highest; then comes the layout, where floating elements (out of the document flow) have a higher level than block-level elements; the lowest level is the element that sets decorative attributes such as background and border.

example:

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        padding: 10px;
    }
    
    .f div:first-of-type,
    .f div:last-of-type {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        margin-left: 10px;
    }
    
    .f div:last-of-type {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        float: left;
        margin-top: -90px;
        margin-left: 30px;
    }
    
    label {
        background-color: rgba(247, 236, 27, 0.8);
        border: 1px dashed #FFC107;
        padding: 5px;
    }
</style>

<div class="f">
    <label>hello</label>
    <div></div>
    <div></div>
</div> 

If elements overlap, the one with a higher stacking level will cover the smaller one; if the two elements have the same stacking level, the latter will cover the former according to the rendering order.

example:

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        padding: 10px;
        overflow: hidden;
    }
    
    .f div:first-of-type,
    .f div:last-of-type {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        float: left;
    }
    
    .f div:last-of-type {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        margin-top: -40px;
        margin-left: 30px;
    }
</style>

<div class="f">
    <div></div>
    <div></div>
</div> 

z-index can affect the stacking level

If you need to change the stack level of an element, you can use z-index on the positioned element (1).

z-index can be a positive integer, 0 or a negative integer; if there is no z-index (default z-index:auto) or z-index is manually set to auto, it is treated as 0.

*(1) Refers to elements whose position value is relative, absolute, or fixed.

example:

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        padding: 10px;
        position: relative;
        z-index: 0;
    }
    
    .f div:first-of-type,
    .f div:last-of-type {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        margin-left: 10px;
    }
    
    .f div:last-of-type {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        margin-left: 30px;
        position: absolute;
        top: 14px;
        /* z-index: -1; */
    }
    
    label {
        background-color: rgba(247, 236, 27, 0.8);
        border: 1px dashed #FFC107;
        padding: 5px;
    }
</style>

<div class="f">
    <label>hello</label>
    <div></div>
    <div></div>
</div>

When z-index is a positive integer, 0 or auto:

When z-index takes a negative integer:

Careful people may find that in the example, we set the positioning attribute for the decoration element (class name f) and the z-index is set to 0. If this is not set, when the z-index of the element (the test element with a blue background) takes a negative integer, it will run behind the decorative element. Regarding this point, we will talk about "z-index takes negative integer values" later.

z-index and stacking context

z-index can affect the stacking level, but there is a very important prerequisite, that is, the elements involved in the comparison must be on the same level, which is called "stacking context" in the specification. "Context" means that this is a closed area, and the child elements within the area will not affect the external elements; and "stack" means that as long as the element creates this area, it will be higher than the current context on the "z-axis".
Stacking contexts can be created using some CSS properties. Common properties are as follows:

• The html element creates a default stacking context called the root stacking context, and all elements are placed on this layer.
• The position value is relative or absolute, and the z-index value is not auto(1).
• The position value is fixed.
• New CSS3 properties, such as flex and grid layout elements with opacity values ​​other than 1, transform values ​​other than none, and z-index values ​​other than auto.

*(1) Although z-index:auto and z-index:0 can be considered the same, the element with z-index:auto is just a normal positioned element, while z-index:0 creates a stacking context. If the two are of the same level, the latter will override the former.

In actual work, new CSS3 properties are rarely used to actively create stacking contexts. Therefore, the most common way to create a stacking context is to set a z-index integer value for the positioned element.
As mentioned earlier, z-index can modify the stacking level of an element in the current stacking context. Now z-index has another meaning, which is to create a new stacking context.
Below, we can better understand the stacking context through examples:

example:

<style>
    .f {
        background-color: #ccffcc;
        border: 1px dashed #669966;
        height: 80px;
        position: relative;
        margin-bottom: 10px;
    }
    
    .f_1>div {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 150px;
        height: 200px;
        position: absolute;
        top: 20px;
        left: 170px;
    }
    
    .f_2>div {
        background-color: rgba(221, 221, 255, .8);
        border: 1px dashed #000099;
        width: 200px;
        height: 70px;
        position: absolute;
        top: 65px;
        left: 50px;
    }
</style>

<div class="f f_1">#1
    <div>#3
    </div>
</div>
<div class="f f_2">#2
    <div>#4
    </div>
</div>

In this example, no element sets the z-index value. In this case, the z-index is the default auto. Therefore, the elements are rendered in the order in which the latter covers the former.
If you set positive z-index values ​​for #3 and #4, as follows:

.f_1>div {
    z-index: 1;
}

.f_2>div {
    z-index: 2;
}

At this point, the parent elements #1 and #2 do not have a z-index value set, so they do not create a new stacking context, which means that #3 and #4 still belong to the root stacking context.
In the same stacking context, elements with a larger stacking level will cover smaller ones, so #4 is above all elements.
Now set the z-index values ​​for #2, #3, and #4 as follows:

.f_1>div {
    z-index: 2;
}

.f_2 {
    z-index: 1;
}

.f_2>div {
    z-index: 9;
}

Although #4's z-index value is greater than #3's, since #4 is a child element of #2, its stacking level is completely subject to #2's level. #2 and #3 belong to the same root stacking context, and #3 is larger than #2, so #3 is above #2 (and its child elements).

z-index takes a negative integer value

It is generally understood that if z-index takes a negative value, it should go behind the background color:

example:

<style>
    .f {
        background-color: rgba(204, 255, 204, .8);
        border: 1px dashed #669966;
        padding: 10px;
    }
    
    .f div {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        position: relative;
        top: 45px;
        z-index: -1;
    }
</style>

<div class="f">
    <div></div>
</div> 

In actual work, negative z-index values ​​can achieve the effect of hiding elements. But if you create a stacking context for the parent element, the child element will not be hidden:

example:

<style>
    .f {
        background-color: rgba(204, 255, 204, .8);
        border: 1px dashed #669966;
        padding: 10px;
        position: relative;
        z-index: 0;
    }
    
    .f div {
        background-color: rgba(255, 221, 221, .8);
        border: 1px dashed #990000;
        width: 200px;
        height: 70px;
        position: relative;
        top: 45px;
        z-index: -1;
    }
</style>

<div class="f">
    <div></div>
</div> 

After comparing the before and after examples, it is obvious that no matter how negative the z-index is, it still cannot break through the current stacking context.

This is the end of this article about CSS stacking and z-index sample code. For more relevant CSS stacking and z-index content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!