z-index

In CSS, the z-index property is used to control the stacking order of elements on a web page.
It specifies the relative stack level of an element in the z-axis, which is perpendicular to the screen or viewport.
Elements with a higher z-index value are positioned above elements with lower z-index values.

Syntax:

z-index: number|auto|inherit|initial;

Possible values:

number: element's stack level is set to the given value. It allows negative values.

auto: It specifies that the order of the stack is equivalent to the parent, i.e., default.

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            position: fixed;
            width: 400px;
            height: 300px;
            z-index: 20;
            background-color: red;
        }

        img {
            position: relative;
            z-index: 22;
        }

        h1 {
            position: relative;
            z-index: 28;
            color: blue;
        }
    </style>
</head>

<body>
    <div></div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkCa1-Sh5AUhQp84TJxkGQeT_sreG0szpJnt0sATqy&s"></img>
    <h1>Welcome to Quipoin</h1>
</body>

</html>

Output: