How to adjust the stacking of elements using the CSS z-index property

z-index is an attribute that can set the stacking order of elements. When stacking papers, if the bottom paper is hidden behind the top paper, it will not be visible. Similarly, the elements of the WEB site will also be stacked in this way. Using z-index, you can change the order of stacking.

The stacking order is determined by the size of the value

Specify the z-index attribute value with a number. If this value If it's big, it's in the front, if it's small, it's in the back.

For the red box, we set the value of z-index to 10, and for the blue box, we set the value of z-index to 100.

Since the blue box z-index has a larger value, it will be displayed in front.

If you change the z-index value of the blue box to 5, because the value of the red box is greater than the blue box, the red box is in front

Position must be specified when using the z-index attribute

In addition, the z-index attribute can only be used for positions with relative, absolute, fixed and cannot be used for position:static .

How to use z-index attribute?

Basic syntax

选择器{
z-index: 数值;
}

Let’s look at specific examples

HTML

<div class="z-index_test">
</div>
<div class="z-index_test2">
</div>

How to adjust the stacking of elements using the CSS z-index property

.z-index_test {
    height:  200px;             
    width:  200px;              
    background-color: #FF5722;  
    position:  relative;       
    z-index: 10;                
}
.z-index_test2 {
    height:  200px;             
    width:  200px;              
    background-color: #03A9F4;  
    position:  absolute;        
    top: 70px;                  
    left: 100px;                
    z-index: 100;              
}

The operation effect is as follows

This article ends here. For more exciting content, you can pay attention to the relevant column tutorials on the php Chinese website! ! !

The above is the detailed content of How to adjust the stacking of elements using the CSS z-index property. For more information, please follow other related articles on the PHP Chinese website!