In this article, We will learn about z-index in CSS.

z-index

The z-index specifies the stacking order of elements in the vertical direction.

The element with greater stacking order(or z-index) will always be on the top of the element with the lower stack order.

If two elements overlap each other with the same stacking order. Then, the element which is mentioned last in the HTML will be shown at the top.

The default stacking order for any element is 0.

Note: This property only applies for positioned elements(other than static which is the default position) and flex items.

It has the following values:

S.No.	Value	Description
1.	auto	This is the default value. The stacking order will be the same as the parent.
2.	integer	The value of stacking can be any possible integer. negative values are also allowed

Value: auto: The stacking order of the element will the same as the parent. But the child element will appear at the top of the parent element as the child element is mentioned after the parent element in the HTML document.

Value: integer: The given integer will be the stacking order of the element. and it also establishes a new stacking context for the descendant elements. Negative values of stacking are also possible.

For Example:

#container1  {
              position: relative;
              background-color: red;
              width: 300px;
              height: 100px;
              top: 20px;
              left: 120px;
              z-index: 1;
              }

#container2  {
              position: relative;
              background-color: blue;
              width: 300px;
              height: 100px;
              top: -30px;
              left: 80px;
              z-index: 2;
              }

#container3  {
              position: relative;
              background-color: green;
              width: 300px;
              height: 100px;
              top: -80px;
              left: 40px;
              z-index: 3;
              }

Output:

Also, remember that nesting plays an important role in stacking elements. If an element A is on top of another element B, then the child of element B can never be above element A.

For Example:

#container1  {
              position: relative;
              background-color: green;
              width: 450px;
              height: 200px;
              top: 10px;
              left: 120px;
              z-index: 1;
              }

#child {   /* child of container1 with z-index:100 but still below the container2 with z-inex:2.
        position: relative;
        background-color: red;
        width: 200px;
        height: 100px;
        top: 30px;
        z-index: 100;
        }

#container2  {
              position: relative;
              background-color: blue;
              width: 300px;
              height: 100px;
              top: -80px;
              left: 80px;
              z-index: 2;
              }

Output:

That’s all about the z-index property in CSS.

Hope this article will guide you to recognize all about the z-index property in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.