Z-index - stacking context

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

// A clean way to deal with z-index layers in Sass
// Based on http://css-tricks.com/handling-z-index/
// ---

// A map of z layers
// All z-index values should be set there

$z-layers: (
  'modal':            5000,
  'dropdown':         4000,
  'default':             1,
  'bottomless-pit': -10000
);

// A function helper to avoid having to type `map-get($z-layers, ...)`
// ---
// @param [string] $component: the layer to use
// ---
// @return [number] | [null]

@function z($layer) {
  @if not map-has-key($z-layers, $layer) {
    @warn "No z-index found in $z-layers map for `#{$layer}`. Property omitted.";
  }
  
  @return map-get($z-layers, $layer);
}

// Examples & demo
// ---

// Modal
.modal {
  z-index: z("modal");
}

// ... and its backdrop
// Computed z-index based on the one from modal
.modal-backdrop {
  z-index: z("modal") + 1;
}

// Dropdown
.dropdown {
  z-index: z("dropdown");
}

// A pseudo-element that has to be on top
// Computed z-index based on the default one
.element:after {
  z-index: z("default") - 2;
}

// A component that has to be veryyyy low
.im-falling {
  z-index: z("bottomless-pit");
}

// Calling an unknown layer
// will omit the z-index property
.error {
  z-index: z("unknown-z-index");
}

SassMeister-output.css

.modal {
  z-index: 5000;
}

.modal-backdrop {
  z-index: 5001;
}

.dropdown {
  z-index: 4000;
}

.element:after {
  z-index: -1;
}

.im-falling {
  z-index: -10000;
}