CSS Z-Index

The css z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is above the other. The z-index property can have the following values: auto, number, initial, and inherit.

Basic Usage

div {
  z-index: 1;
}

In the above example, the div element will have a z-index of 1. The higher the z-index value, the higher up the element will be in the stack order.

Using Z-Index with Position Property

The z-index property only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).

Here is an example:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
  z-index: 1;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
  z-index: 2;
}

In this example, the div.absolute element will appear on top of the div.relative element because it has a higher z-index value.

Negative Z-Index Values

The z-index property can also have negative values.

div {
  z-index: -1;
}

In this example, the div element will have a z-index of -1. Elements with a negative z-index value will appear behind elements with a z-index of 0 or none.

Auto Value

The z-index property can also have a value of auto.

div {
  z-index: auto;
}

In this example, the stack order of the div element is the same as its parent.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.