Use our low-level
z-index utilities to quickly change the stack level of an element or component.
z-index utilities to stack elements on top of one another. Requires a
position value other than
static, which can be set with custom styles or using our position utilities.
z-indexutilities because of their default values of
3, which we use for the layout of overlapping components. High-level
z-indexvalues are used for overlay components like modals and tooltips.
<div class="z-3 position-absolute p-5 rounded-3"></div> <div class="z-2 position-absolute p-5 rounded-3"></div> <div class="z-1 position-absolute p-5 rounded-3"></div> <div class="z-0 position-absolute p-5 rounded-3"></div> <div class="z-n1 position-absolute p-5 rounded-3"></div>
Bootstrap overlay components—dropdown, modal, offcanvas, popover, toast, and tooltip—all have their own
z-index values to ensure a usable experience with competing “layers” of an interface.
Read about them in the
z-index layout page.
On some components, we use our low-level
z-index values to manage repeating elements that overlap one another (like buttons in a button group or items in a list group).
Learn about our
Customize this Sass map to change the available values and generated utilities.
$zindex-levels: ( n1: -1, 0: 0, 1: 1, 2: 2, 3: 3 );