CSS z-index Property Explained with Examples

z-index

The z-index property in CSS controls the stacking order of elements along the z-axis (the axis perpendicular to the screen). This determines which elements appear in front or behind others when they overlap.

Syntax:

selector {
  z-index: value;
}

values:

Value	Description
number	Sets a numeric stack level. Higher numbers appear on top. Can be negative.
auto	Inherits staking order from the parent.
inherit	Inherits the value from its parent element.
initial	Sets to the default value ( auto ).

Important: The z-index only works on elements that have a position value other than static (e.g., relative, absolute, fixed, or sticky).

Example: Stacking Elements Using z-index

<!DOCTYPE html>
<html>

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

    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">
  <h1>Welcome to Quipoin</h1>
</body>

</html>

Output:

How z-index Works

A higher z-index means the element will appear above elements with a lower z-index.

It is essential that the element is positioned (relative, absolute, fixed, etc.) for z-index to take effect.

Stacking context is affected by opacity, transform, position, and z-index together.

Tip

If two elements have the same z-index, their stacking order is determined by their HTML order the one that comes later will appear on top.