为z-index建立层级规范

// 定义z-index层级变量
$z-index-levels: (
  "modal":           5000,
  "dropdown":         4000,
  "tooltip":          3000,
  "fixed-header":     2000,
  "default":          1,
  "below":            -1
);

// 获取z-index值的函数
@function z($level) {
  @if not map-has-key($z-index-levels, $level) {
    @error "z-index层级 `#{$level}` 不存在。请检查 $z-index-levels 映射。";
  }
  @return map-get($z-index-levels, $level);
}

// 或者使用混合宏
@mixin z-index($level) {
  z-index: z($level);
}

.modal {
  @include z-index("modal"); // z-index: 5000
}

.dropdown {
  @include z-index("dropdown"); // z-index: 4000
}

.header {
  @include z-index("fixed-header"); // z-index: 2000
}

.tooltip {
  @include z-index("tooltip"); // z-index: 3000
}

.popup {
  z-index: 9999;
}

.notification {
  z-index: 10000;
}

.sidebar {
  z-index: 50000;
}

.background-image {
  z-index: -10;
}

.watermark {
  z-index: -5;
}

.card {
  position: relative;
  z-index: 10;
}

.card__badge {
  position: absolute;
  z-index: 11;
}

.card__image {
  position: relative;
  z-index: 9;
}

$modal-base-z-index: map-get($z-index-levels, "modal");

.modal {
  z-index: $modal-base-z-index;
  
  &.is-open {
    // 每个打开的模态框比前一个高10
    z-index: $modal-base-z-index + (10 * var(--modal-count));
  }
}