CSS z-index Property

Last Updated : 04 Jan, 2025

CSS z-index is used to control the stacking order of overlapping elements, which decides whether an element appears on top or behind others based on their assigned value.

It works only on positioned elements (relative, absolute, or fixed).
Default stacking order applies if no z-index is defined.
The z-index property can take various values, which we’ll cover below.

Property values

These are the values of the z-index property and their descriptions:

Value	Description
`auto`	The stack order is equal to that of the parent (default).
`number`	The stack order depends on the number.
`initial`	Sets the property to its default value.
`inherit`	Inherits the property from the parent element.

1. Using z-index with auto

The auto value applies the default stacking order without explicitly defining the stacking context.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        div {
            position: relative;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            z-index: auto;
            top: 50px;
            left: 50px;
            position: absolute;
        }
        .box2 {
            background-color: blue;
            top: 70px;
            left: 70px;
            position: absolute;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
<!--Driver Code Ends }-->

The red box (.box1) and blue box (.box2) overlap.
Since both boxes have their z-index set to auto, the default stacking order applies, and the blue box is rendered on top because it comes later in the DOM.

2. Using z-index with Numbers

Specifying numerical values controls the stacking order. Higher values stack above lower ones.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            z-index: 1;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background-color: blue;
            z-index: 2;
            top: 70px;
            left: 70px;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
<!--Driver Code Ends }-->

The blue box (z-index: 2) appears above the red box (z-index: 1).

3. Using z-index with initial

The initial value resets the z-index to its default value of auto.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            z-index: initial;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background-color: blue;
            z-index: 1;
            top: 70px;
            left: 70px;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
<!--Driver Code Ends }-->

The red box follows the default stacking order since z-index: initial resets to auto.

4. Using z-index with inherit

The inherit value ensures the element inherits its z-index value from its parent.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .parent {
            position: relative;
            z-index: 5;
        }
        .child {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: yellow;
            z-index: inherit;
            top: 50px;
            left: 50px;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

The child element inherits the z-index value (5) from its parent.

5. Combining z-index with Multiple Contexts

When working with multiple stacking contexts, the z-index applies only within its context.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .parent {
            position: relative;
            z-index: 1;
            background-color: lightgray;
            width: 200px;
            height: 200px;
        }

        .child1 {
            position: absolute;
            z-index: 2;
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .child2 {
            position: absolute;
            z-index: 1;
            background-color: blue;
            width: 100px;
            height: 100px;
            top: 50px;
            left: 50px;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>
<!--Driver Code Ends }-->

The red box stacks above the blue box within the same stacking context defined by the parent element.

CSS Overflow

AshwinGoel

Improve

Article Tags :

CSS z-index Property

Property values

1. Using z-index with auto

2. Using z-index with Numbers

3. Using z-index with initial

4. Using z-index with inherit

5. Combining z-index with Multiple Contexts

Similar Reads

Thank You!

What kind of Experience do you want to share?