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-index utilities have small values of
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
5, so using z-index utilities within some components could cause stacking order conflicts.
The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.
||Enable the generation of the z-index utility classes.|
||Map of values that will be used to generate z-index utilities. Setting this to `null` will not generete these utilities.|
No mixins available.