z-index の基本: position が static 以外でのみ有効

NG: position: static（初期値）に z-index を指定しても無効

static
z-index:999
static
z-index:1

→ z-index が効かないので重なり順は変わりません

OK: position: relative にすると z-index が有効になる

behind
z-index: 1
front
z-index: 10

→ z-index: 10 の青が手前に表示されます

CSS変数でレイヤーを管理する

:root {
  --z-content:  1;
  --z-dropdown: 100;
  --z-modal:    1000;
  --z-toast:    2000;
}
content（--z-content: 1）
dropdown（--z-dropdown: 100）
modal（--z-modal: 1000）
toast（--z-toast: 2000）

※ 上記はレイヤー順の概念図です。実際の利用シーンでは各要素が画面上で重なります。
CSS変数で管理すると数値をファイル全体で一括変更できます。