Canvas Docs

Z-Index

Z-Index

Canvas provides a compact z-index scale for layering elements, extending Bootstrap's small set.

Z-index classes

Class z-index
.z-n1 -1 (send behind)
.z-0 0
.z-1 1
.z-2 2
.z-3 3
.z-4 4
.z-5 5
.z-6 6
.z-7 7
.z-8 8
.z-9 9
.z-10 10
.z-auto auto

All are marked !important so they reliably override component defaults. Z-index only takes effect on positioned elements, so pair these with .position-relative, .position-absolute, .position-fixed, or .position-sticky.

Usage

Layer an overlay above an image but keep text on top of both:

<div class="position-relative">
  <img src="photo.jpg" class="z-0" alt="">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50 z-1"></div>
  <div class="position-absolute top-50 start-50 translate-middle z-2 text-white">
    Caption above the overlay
  </div>
</div>

Push a decorative shape behind content:

<div class="position-absolute z-n1">Decorative background shape</div>

Classes

ClassDescription
.z-*

Sets the z-index for an Element

Value
  • .z-1 - Sets the z-index of 1 on the Element
  • .z-2 - Sets the z-index of 2 on the Element
  • .z-3 - Sets the z-index of 3 on the Element
  • .z-4 - Sets the z-index of 4 on the Element
  • .z-5 - Sets the z-index of 5 on the Element
  • .z-6 - Sets the z-index of 6 on the Element
  • .z-7 - Sets the z-index of 7 on the Element
  • .z-8 - Sets the z-index of 8 on the Element
  • .z-9 - Sets the z-index of 9 on the Element
  • .z-10 - Sets the z-index of 10 on the Element
Example: [ch_pre]
...
...
[/ch_pre]
Was this page helpful?