z-index — CSS Technical Interview Questions & Answers

Stacking order among overlapping positioned elements.

z-index

  • Stacking order among overlapping positioned elements.
  • z-index is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { z: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If z-index is about space, draw the box.

Technical Interview Tip: z-index: one rule on .card, then say what changed.

Code Examples for z-index

z-index — working example

.card {
  position: relative; /* containing block for absolute children */
}

.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

z-index — absolute uses the nearest positioned ancestor; fixed uses the viewport; sticky toggles within flow.

How to Explain z-index to an Interviewer

What does z-index do?

A CSS property that changes look/layout Write it in a rule and refresh