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


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 our position utilities.

These z-index utilities have small values of -1 through 3, which can be used for the layout of overlapping components. Larger z-index values are used for overlay components like modals and tooltips to reduce possible stacking conflicts.

<div class="z-3 position-absolute radius-large"><span>.z-3</span></div>
<div class="z-2 position-absolute radius-large"><span>.z-2</span></div>
<div class="z-1 position-absolute radius-large"><span>.z-1</span></div>
<div class="z-0 position-absolute radius-large"><span>.z-0</span></div>
<div class="z-n1 position-absolute radius-large"><span>.z-n1</span></div>


Figuration's overlay components—tooltips, popovers, navbars, dropdowns, modals, offcanvas—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, small z-index values are used to manage repeating elements that overlap one another, for example, buttons in a button group or items in a list group. These values are in the range of -1 through 5, so using z-index utilities within some components could cause stacking order conflicts.

SASS Reference


The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-zindex boolean true Enable the generation of the z-index utility classes.
$utility-z-index string
(n1: -1,
0: 0,
1: 1,
2: 2,
3: 3
Map of values that will be used to generate z-index utilities. Setting this to `null` will not generete these utilities.


No mixins available.