Bootstrap Z-index

Change z-position of an element

Example

This shows how you can change the order of elements. Even though black rectangle is on the tom in HTML structure, it has negative .z-index-n1 class which brings it to back of other two ones. Note that if parent element of .z-index-n1 has a background-color, the .z-index-n1 element will not be visible.

.z-index-n1
.z-index-1
.z-index-2
<div class="z-index-n1 bg-dark pos-abs">.z-index-n1</div>
<div class="z-index-1 bg-primary pos-abs">.z-index-1</div>
<div class="z-index-2 bg-danger pos-abs" data-position="right">.z-index-2</div>

Z-index

Use .z-index-{n2|n1|0|1|2|master} class to change z-position of an element.

  • .z-index-n2 represents z-index: -2
  • .z-index-n1 represents z-index: -1
  • .z-index-0 represents z-index: 0
  • .z-index-1 represents z-index: 1
  • .z-index-2 represents z-index: 2
  • .z-index-master represents z-index: 1090 - the highest z-index