Contextual z-index

z-index.scss

// z-index organization
//
// References:
// - https://css-tricks.com/handling-z-index/
// - http://www.sitepoint.com/using-sass-maps/


// _config.scss
$z-layers: (
  bottomless-pit: -9999,
  default: 0,
  artsy-block: (
    default: 100,
    color-overlay: -1,
    background-image: -2
  ),
);

// _functions.scss
@function z($key, $sub-key: null) {
  @if map-has-key($z-layers, $key) {
    $layer: map-get($z-layers, $key);

    @if $sub-key and map-has-key($layer, $sub-key) {
      $layer: map-get($layer, $sub-key);
    }

    @return $layer;
  }

  @warn "Unknown '#{$key}' in $z-layers.";
  @return null;
}

// Usage
.artsy-block {
  position: relative;
  z-index: z('artsy-block', 'default');
  width: 500px;
  height: 500px;
  
  // add a semi-transparent white overlay that goes over the image but behind the text.
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(#fff, 0.8);
    z-index: z('artsy-block', 'color-overlay');
  }
  
  // background image behind everything.
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: z('artsy-block', 'background-image');
  }
}