CSS Z-index

When elements overlap, z-index decides which one draws on top — higher values sit above lower ones.

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.modal {
  position: fixed;
  z-index: 101;
}

z-index only has an effect on elements with a position other than static (relative, absolute, fixed, or sticky) — setting it on a statically-positioned element does nothing.

Stacking is also scoped: an element with z-index: 9999 can still end up behind a sibling with z-index: 1 if they belong to different stacking contexts (created by properties like opacity < 1, transform, or position + z-index together on an ancestor). If a huge z-index isn't working, the usual cause is a stacking context on a parent limiting how high its children can go.