Z-index

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

Page Contents

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 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.

.z-3

.z-2

.z-1

.z-0

.z-n1

<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>

Overlays

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.

Components

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

Variables

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.

Mixins

No mixins available.