indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Z-index

To quickly modify the stack level of an element or component, use our low-level z-index utilities.

Example #

To stack components on top of one another, use z-index tools. It requires a position value other than static, which can be specified by utilizing custom styles or our position tools.

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. 
<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>
RESULT
z-3
z-2
z-1
z-0
z-n1

Overlays #

To ensure a useful experience with competing "layers" of an interface, UX4G overlay components such as dropdown, modal, offcanvas, popover, toast, and tooltip each have their own z-index values.

Read about them in the z-index layout page.

Component approach #

Managed repeated elements that overlap one another on various components using the low-level z-index values, such as buttons in a button group or items in a list group.

Find out more about our z-index strategy.

Sass #

Sass maps #

Customize this Sass map to change the available values and generated utilities.

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3
);

Sass utilities API #

Position utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API. 

"z-index": (
  property: z-index,
  class: z,
  values: $zindex-levels,
)