What is maximum & minimum value for z-index property in CSS ?

Last Updated : 24 May, 2023

We have all seen that developers sometimes set z-index values to 999, 99999, etc to ensure that an element always remains on top.

In this article, we will discuss the maximum and minimum values for the CSS z-index property.

z-index: It is the CSS property that defines the stack level of positioned elements in the current stacking context i.e. elements with a smaller z-index are covered by elements with a larger z-index.

The keyword auto or an <integer> is used to set the z-index property.
Elements with any position besides static are affected by the z-index.

The maximum and minimum value for the z-index in most browsers is limited to a signed 32-bit value i.e. from −2147483648 to +2147483647.

Example: In this example, we will see the maximum and minimum values for the z-index.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
        }
 
        .box1 {
            background-color: green;
            position: absolute;
            z-index: -1;
            height: 200px;
            width: 200px;
        }
 
        .box2 {
            background-color: blue;
            position: absolute;
            left: 50px;
            z-index: 0;
            height: 100px;
            width: 300px;
        }
 
        .box3 {
            background-color: red;
            position: absolute;
            left: 150px;
            top: 50px;
            z-index: 1;
            height: 120px;
            width: 250px;
        }
    </style>
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
 
    <b>
        <p>max and min value of z-index</p>
    </b>
 
    <div class='container'>
        <div class='box1'></div>
        <div class='box2'></div>
        <div class='box3'></div>
    </div>
</body>
</html>