Generated by SassMeister.com.

input.scss

/* 

Z-Index Utility Library 

The idea here is that most values are auto-generated by the tool (the null values), but you can specify them if you want. That way, if you have a third-party component with a z-index value you can’t change, you plug that into the map, and then the auto-generated numbers will factor that in when you make layers on top. It also means it’s very easy to slip layers in between others.

Inspired by Rafi Strauss OZMap
https://rafistrauss.com/blog/ordered_z_index_maps

Mentioned in "Systems for z-index" by Chris Coyier 
https://css-tricks.com/systems-for-z-index/

Please keep in mind that this doesn’t help with another common z-index bug: stacking contexts. 

"It’s always the stacking context."
https://css-tricks.com/its-always-the-stacking-context/

If some element is in a stacking context that is under some other stacking context, there is no z-index value possible that will bring it on top. 

To help us debug context there is a debugging tool for stacking contexts in the form of a browser extension:

[CSS Stacking Context inspector]
(https://chromewebstore.google.com/detail/css-stacking-context-insp/apjeljpachdcjkgnamgppgfkmddadcki)

[CSS Stacking Context inspector – Get this Extension for 🦊 Firefox (en-US)]
(https://addons.mozilla.org/en-US/firefox/addon/css-stacking-context-inspector/)

Note:

Bootstrap 5 defines the following z-indexes:

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

*/

$globalZIndexes: (
  a: null, // 1
  b: null, // 2
  c: null, // 3
  d: null, // 4
  e: null, // 5
  f: null, // 6
  zindex-dropdown: 1000,
  zindex-sticky: 1020,
  zindex-fixed: 1030,
  zindex-modal-backdrop: 1040,
  zindex-offcanvas: 1050,
  zindex-modal: 1060,
  zindex-popover: 1070,
  zindex-tooltip: 1080,
  zoomviewer: 11000, // artbasel-ui-kit/packages/themes/src/photoswipe/artbasel/_zoomviewer.scss
  pswp-root-z-index: 100000 // Used in Photoswipe artbasel-ui-kit/packages/themes/src/photoswipe/_photoswipe.scss
);

@function getZIndex($listKey) {
  @if map-has-key($globalZIndexes, $key: $listKey) {
    $zAccumulator: 0;

    @each $key, $val in $globalZIndexes {
      @if $val == null {
        $zAccumulator: $zAccumulator + 1;
        $val: $zAccumulator;
      }

      @else {
        @if $val <= $zAccumulator {
          //* If the z-index is not greater than the elements preceding it,
          //* the whole element-order paradigm is invalidated
          @error "z-index for #{$key} must be greater than the preceding value!";
        }
        $zAccumulator: $val;
      }

      @if $key == $listKey {
        @return $zAccumulator;
      }
    }
  }

  @else {
    @error "#{$listKey} doesn't exist in the $globalZIndexes map";
  }
}

/*

Example usage:

.a {
  z-index: getZIndex(a);
}

*/

.a {
  z-index: getZIndex(a);
}

output.css

@charset "UTF-8";
/* 

Z-Index Utility Library 

The idea here is that most values are auto-generated by the tool (the null values), but you can specify them if you want. That way, if you have a third-party component with a z-index value you can’t change, you plug that into the map, and then the auto-generated numbers will factor that in when you make layers on top. It also means it’s very easy to slip layers in between others.

Inspired by Rafi Strauss OZMap
https://rafistrauss.com/blog/ordered_z_index_maps

Mentioned in "Systems for z-index" by Chris Coyier 
https://css-tricks.com/systems-for-z-index/

Please keep in mind that this doesn’t help with another common z-index bug: stacking contexts. 

"It’s always the stacking context."
https://css-tricks.com/its-always-the-stacking-context/

If some element is in a stacking context that is under some other stacking context, there is no z-index value possible that will bring it on top. 

To help us debug context there is a debugging tool for stacking contexts in the form of a browser extension:

[CSS Stacking Context inspector]
(https://chromewebstore.google.com/detail/css-stacking-context-insp/apjeljpachdcjkgnamgppgfkmddadcki)

[CSS Stacking Context inspector – Get this Extension for 🦊 Firefox (en-US)]
(https://addons.mozilla.org/en-US/firefox/addon/css-stacking-context-inspector/)

Note:

Bootstrap 5 defines the following z-indexes:

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

*/
/*

Example usage:

.a {
  z-index: getZIndex(a);
}

*/
.a {
  z-index: 1;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}