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'); }