Z-Index

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Learn how the stacking-layer system works

z-index controls the stacking order of positioned elements. The higher the value, the higher it sits. It's commonly needed for modals, dropdowns, tooltips, and sticky headers. One thing to watch out for: z-index only works within a stacking context. Sometimes setting it to 9999 still doesn't bring it to the front — that's not CSS being difficult, that's the stacking context at work.

css

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

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

You should see

The backdrop covers the whole page, and the modal box appears above the backdrop.

Tip

In larger projects, it's good practice to keep a systematic z-index scale, like 10, 20, 30, 100.