Z-index

Control the stacking order of overlapping elements with the .z-* utilities.

Z-index utilities

Set the z-index of an element directly:

<div class="z-30">On top</div>
<div class="z-10">Beneath</div>

Available: .z-0, .z-10, .z-20, .z-30, .z-40, .z-50, and .z-auto.

Component z-indexes

boodoo's components use well-defined z-index values so that dropdowns stack under navbars, modals above everything, etc. These are exposed as CSS custom properties for tweaking:

.my-modal {
  --boodoo-zindex-modal: 2000;  /* pushes it above the default */
}