Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A good way keeping control of your used z-indexs to avoid confusing or bugs by choosing arbitary numbers
// _config.scss
$z-layers: (
bottomless-pit: -9999,
default: 1,
dropdown: 3000,
overlay: 4000
modal: 4001
// _functions.scss
@function z($key) {
@if map-has-key($z-layers, $key) {
@return map-get($z-layers, $key);
@warn "Unknown `#{$key}` in $z-layers.";
@return null;
// _component.scss
.overlay {
z-index: z(overlay);
.element {
z-index: (z(default) + 1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.