z-index basics: only works when position is not static

NG: Specifying z-index on position: static (the default) has no effect

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

→ z-index has no effect, so the stacking order does not change

OK: Setting position: relative makes z-index effective

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

→ The blue box with z-index: 10 is rendered in front

Managing layers with CSS custom properties

: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)

* The above is a conceptual diagram of layer order. In real usage, these elements overlap on screen.
Using CSS custom properties lets you update all z-index values from a single place.