A good way keeping control of your used z-indexs to avoid confusing or bugs by choosing arbitary numbers

First class z-index (CSS)

// _config.scss
$z-layers: (
  bottomless-pit: -9999,
  default: 1,
  dropdown: 3000,
  overlay: 4000
  modal: 4001
);
 
// _functions.scss
@function z($key) {
  @if map-has-key($z-layers, $key) {
    @return map-get($z-layers, $key);
  }
 
  @warn "Unknown `#{$key}` in $z-layers.";
  @return null;
}
 
// _component.scss
.overlay {
  z-index: z(overlay);
}
 
.element {
  z-index: (z(default) + 1);
}