Skip to main content

Centralize All Z-index Values

Z-index bugs are some of the most painful to debug. Never write a raw z-index number again.

SCSS
$z-index: (
  'below':   -1,
  'base':     0,
  'dropdown': 100,
  'sticky':   200,
  'overlay':  300,
  'modal':    400,
  'toast':    500,
);

@function z($layer) {
  @return map.get($z-index, $layer);
}

.modal   { z-index: z('modal'); }
.tooltip { z-index: z('toast'); }
.sticky-nav { z-index: z('sticky'); }