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)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss

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

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

See the using modules page for more information.

Using the framework (anchor)

Using the recommended custom setup enable the styles (and required breakpoints) in an overrides document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-z-index:      true;
$enable-z-index-sm:   true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information.

Source code (anchor)

The Z-index source file is included with the layout module files, you can view the source code from the latest release (v1.5.0) via the Github link below.

Source document: stylemods/scss/layout/z-index.scss
View on Github: https://github.com/pmbrown/StyleMods/blob/main/scss/layout/z-index.scss

Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.