Z-index

Z-index is a CSS property that controls the stacking order of positioned elements along the z-axis (depth). Higher z-index values appear in front of elements with lower values.

Basic Usage

css
.element {
  position: relative; /* or absolute, fixed, sticky */
  z-index: 10;
}

.overlay {
  position: fixed;
  z-index: 1000;
}

Requirements

Z-index only works on positioned elements:

position: relative
position: absolute
position: fixed
position: sticky

It has no effect on position: static (the default).

Stacking Context

css
/* Parent creates stacking context */
.parent {
  position: relative;
  z-index: 1;
}

/* Child's z-index is relative to parent */
.child {
  position: absolute;
  z-index: 9999; /* Still behind elements with z-index > 1 outside parent */
}

Common Values

css
/* Negative - behind normal flow */
z-index: -1;

/* Default */
z-index: auto;

/* Positive - in front of normal flow */
z-index: 1;
z-index: 10;
z-index: 100;
z-index: 999;
z-index: 9999;

Best Practices

css
/* Use a scale system */
:root {
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;
}

.modal {
  z-index: var(--z-modal);
}

Common Use Cases

Modals

css
.modal {
  position: fixed;
  z-index: 1000;
}

Dropdowns

css
.dropdown-menu {
  position: absolute;
  z-index: 100;
}

Tooltips

css
.tooltip {
  position: absolute;
  z-index: 1200;
}

Overlays

css
.overlay {
  position: fixed;
  z-index: 999;
}

Debugging Tips

Check if element is positioned
Verify parent stacking contexts
Use browser DevTools to inspect computed z-index
Look for conflicting z-index values