Skip to main content

Z-index

While not a part of Bootstrap’s grid system, z-indexes play an important part in how our components overlay and interact with one another.

Definition and Usage

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

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

Our z-index class list:


Z-index minus

            
              .z-index-n100 {
  z-index: -100;
}
.z-index-n10 {
  z-index: -10;
}
.z-index-n5 {
  z-index: -5;
}
.z-index-n4 {
  z-index: -4;
}
.z-index-n3 {
  z-index: -3;
}
.z-index-n2 {
  z-index: -2;
}
.z-index-n1 {
  z-index: -1;
}

Z-index

            
.z-index-1 {
  z-index: 1;
}
.z-index-2 {
  z-index: 2;
}
.z-index-3 {
  z-index: 3;
}
.z-index-4 {
  z-index: 4;
}
.z-index-5 {
  z-index: 5;
}
.z-index-10 {
  z-index: 10;
}
.z-index-20 {
  z-index: 20;
}
.z-index-50 {
  z-index: 50;
}
.z-index-100 {
  z-index: 100;
}