Determining the Stack Order with z-index

In CSS, the z-index property represents the stacking level of HTML elements, and it is used to control the stacking order among these elements.

It's similar to deciding which card goes on top and which goes below when creating a stack of cards.

Elements with a higher z-index value will appear above elements with a lower z-index.

The z-index takes an integer value and applies only to elements with position properties set to relative, absolute, or fixed, and not to those with a static position.

Copy
#one {
  position: absolute;
  z-index: 1;
}

#two {
  position: absolute;
  z-index: 2;
}

In the CSS code above, the element with the id two will appear above the element with the id one.

Assigning a negative value to z-index places the element behind other elements.

Example:

Copy
#one {
  position: relative;
  z-index: -1;
}

With z-index set to -1, the #one element is displayed behind other elements.

Follow the highlighted code sections to input.