Z-index

A basic set of Z-index utility classes with module mixins for responsive modifiers.

Utilities (anchor)

Z-index utility names and property values
Utility name	Property values
.z-neg	z-index: -1
.z-0	z-index: 0
.z-100	z-index: 100
.z-200	z-index: 200
.z-300	z-index: 300
.z-400	z-index: 400
.z-500	z-index: 500
.z-top	z-index: calc(infinity)
.z-index	z-index: var(--zindex)

Responsive mixins (anchor)

Responsive modifier mixins are provided to include where required in custom breakpoints, the utilities available use the following modifier class naming convention:

.z-index-100
.z-index-100-xxl
.z-index-100-xl
.z-index-100-lg
.z-index-100-md
.z-index-100-sm
.z-index-100-xs
.z-index-100-xxs

Using the module (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

custom.scss

@use "stylemods/scss" as *;
@include z-index-css;

// Example breakpoint
@media (max-width: 480px) {
  @include z-index-sm-css;
}

Source code (anchor)

z-index.scss

//  ------------------------------------------------------------
//  Z-index
//  ------------------------------------------------------------
$zindex-neg:      -1 !default;
$zindex-0:        0;
$zindex-100:      100 !default;
$zindex-200:      200 !default;
$zindex-300:      300 !default;
$zindex-400:      400 !default;
$zindex-500:      500 !default;
$zindex-top:      calc(infinity) !default;
$zindex-inline:   var(--zindex) !default;

$zindex-values: (
  "z-neg": $zindex-neg,
  "z-0": $zindex-0,
  "z-100": $zindex-100,
  "z-200": $zindex-200,
  "z-300": $zindex-300,
  "z-400": $zindex-400,
  "z-500": $zindex-500,
  "z-top": $zindex-top,
  "z-index": $zindex-inline,  
) !default;

@mixin z-index-css { 
  @each $name, $value in $zindex-values {
    .#{$name} {
      z-index: #{$value};
    }
  }
}

@mixin z-index-xxl-css {  
  @each $name, $value in $zindex-values {
    .#{$name}-xxl {
      z-index: #{$value};
    }
  }
}

@mixin z-index-xl-css {  
  @each $name, $value in $zindex-values {
    .#{$name}-xl {
      z-index: #{$value};
    }
  }
}

@mixin z-index-lg-css {  
  @each $name, $value in $zindex-values {
    .#{$name}-lg {
      z-index: #{$value};
    }
  }
}

@mixin z-index-md-css {  
  @each $name, $value in $zindex-values {
    .#{$name}-md {
      z-index: #{$value};
    }
  }
}

@mixin z-index-sm-css {  
  @each $name, $value in $zindex-values {
    .#{$name}-sm {
      z-index: #{$value};
    }
  }
}

@mixin z-index-xs-css {  
  @each $name, $value in $zindex-values {
    .#{$name}-xs {
      z-index: #{$value};
    }
  }
}

@mixin z-index-xss-css {  
  @each $name, $value in $zindex-values {
    .#{$name}-xxs {
      z-index: #{$value};
    }
  }
}