Utilities

Z-index

Use the low-level z-index utilities to quickly change the stack level of an element or component.

On this page

Example#

Use 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 the position utilities.

We call these "low-level" z-index utilities because of their default values of -1 through 3, which we use for the layout of overlapping components. High-level z-index values are used for overlay components like modals and tooltips.

z-3

z-2

z-1

z-0

z-n1

<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>

Overlays#

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. felt-css uses the same values as Bootstrap:

Layer	`z-index`
Dropdown	1000
Sticky (`.sticky-top`, `.sticky-bottom`)	1020
Fixed (`.fixed-top`, `.fixed-bottom`)	1030
Offcanvas backdrop	1040
Offcanvas	1045
Modal backdrop	1050
Modal	1055
Popover	1070
Tooltip	1080
Toast container	1090

Component approach#

On some components, we use the 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).