Tutorials
CSS
Z-index and Stacking Context

Z-index and Stacking Context

Z-index controls the stacking order of elements on a web page. Understanding how it works helps you manage overlapping elements like dropdowns, modals, and navigation menus.

What is Z-index?

Z-index determines which elements appear on top when they overlap. Higher z-index values appear above lower ones.

.element-behind {
  z-index: 1;
}

.element-front {
  z-index: 2; /* Appears above element-behind */
}

How Z-index Works

Z-index only works on positioned elements (position: relative, absolute, fixed, or sticky).

.positioned-element {
  position: relative;
  z-index: 10;
}

Stacking Context

When you set a z-index, you create a stacking context. Elements within the same context are stacked relative to each other.

What Creates a Stacking Context

  • Root element (html)
  • Positioned elements with z-index
  • Elements with opacity < 1
  • Elements with transform, filter, or perspective
  • Elements with mix-blend-mode
  • Elements with isolation: isolate

Stacking Order

Elements stack in this order (back to front):

  1. Background and borders of root element
  2. Non-positioned elements in DOM order
  3. Positioned elements with z-index: auto (in DOM order)
  4. Positioned elements with positive z-index (lowest first)
  5. Elements with transform, opacity, etc.

Practical Examples

Modal Overlay

Create a modal that appears above everything.

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  z-index: 1001; /* Above overlay */
}

Dropdown Menu

Position dropdown above other content.

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100; /* Above other content */
}

Sticky Navigation

Keep navigation above scrolling content.

.nav {
  position: sticky;
  top: 0;
  background: white;
  z-index: 50;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Card Stack

Create overlapping cards.

.card-stack {
  position: relative;
}

.card {
  position: absolute;
  width: 300px;
  height: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card:nth-child(1) {
  z-index: 3;
  top: 0;
  left: 0;
}

.card:nth-child(2) {
  z-index: 2;
  top: 20px;
  left: 20px;
}

.card:nth-child(3) {
  z-index: 1;
  top: 40px;
  left: 40px;
}

Common Issues

Z-index Not Working

Remember: z-index only works on positioned elements!

/* This won't work */
.element {
  z-index: 10; /* No position property */
}

/* This works */
.element {
  position: relative;
  z-index: 10;
}

Parent-Child Relationships

Children can’t appear above their parent’s stacking context.

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 9999; /* Still constrained by parent's context */
}

Transform Creates Context

Using transform creates a new stacking context.

.element {
  transform: translateZ(0); /* Creates stacking context */
  z-index: 10; /* Now this works */
}

Managing Z-index

Use a System

Define z-index levels in your CSS.

:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

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

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

Avoid High Numbers

Don’t use arbitrarily high z-index values.

/* Bad */
.super-important {
  z-index: 999999;
}

/* Good */
.super-important {
  z-index: 10;
}

Debugging Z-index

Use browser dev tools to inspect stacking contexts.

  1. Open DevTools
  2. Go to Elements panel
  3. Look for “Stacking context” in computed styles
  4. Use 3D view to visualize stacking

Best Practices

  1. Use a consistent z-index scale
  2. Only use z-index when necessary
  3. Understand stacking contexts
  4. Test on different browsers
  5. Document your z-index system

Common Patterns

  • Modals: High z-index (400-500)
  • Dropdowns: Medium z-index (100-200)
  • Tooltips: Medium-high z-index (300-400)
  • Sticky elements: Low-medium z-index (50-100)
  • Overlays: High z-index (300-400)

External Resources:

Related Tutorials:

Last updated on
CSS Units and MeasurementsOverflow Property