CSS — Z-index

What is z-index?

z-index controls how elements stack on top of each other. Higher values appear in front of lower values.

.front { z-index: 10; }
.back { z-index: 1; }

How z-index Works

Rule 1: z-index Only Works on Positioned Elements

z-index only affects elements with position set to relative, absolute, fixed, or sticky:

/* This WON'T work */
.box {
  z-index: 10;  /* ignored — element is static */
}

/* This WILL work */
.box {
  position: relative;
  z-index: 10;
}

Rule 2: Higher z-index = On Top

.layer-1 { z-index: 1; }
.layer-2 { z-index: 2; }  /* on top of layer-1 */
.layer-3 { z-index: 3; }  /* on top of everything */

Rule 3: Siblings Only

z-index only compares elements that share the same parent:

<div class="parent-a">
  <div class="child-a" style="z-index: 100">A</div>
</div>
<div class="parent-b">
  <div class="child-b" style="z-index: 1">B</div>
</div>

Even though child-a has z-index: 100, parent-b can still appear on top if its own z-index is higher.

Stacking Context

A stacking context is a self-contained layer. Elements inside a stacking context can't escape it:

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

.child {
  position: absolute;
  z-index: 9999;  /* only within parent's context */
}

What Creates a Stacking Context?

• position with z-index (not auto)
• opacity less than 1
• transform, filter, backdrop-filter
• position: fixed or sticky
• isolation: isolate

Practical Examples

Modal on Top of Everything

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal {
  position: relative;
  z-index: 1001;  /* above the overlay */
}

Tooltip Above Content

.tooltip-container {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 100;
  white-space: nowrap;
}

Tabbed Interface

.tab { position: relative; z-index: 1; }
.tab.active { z-index: 2; }
.tab-content { position: relative; z-index: 0; }

Common Gotchas

Parent Blocks Child

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

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

/* Fix: remove z-index from parent or set to auto */
.parent {
  position: relative;
  z-index: auto;  /* Child can now escape */
}

Negative z-index

.background-layer {
  position: fixed;
  inset: 0;
  z-index: -1;  /* Behind all content */
}

Best Practices

• Use specific values (10, 100, 1000) not sequential (1, 2, 3) to leave room for insertion
• Create a z-index scale for your project:
  • 1: Content
  • 10: Dropdowns
  • 100: Sticky elements
  • 1000: Modals
  • 9999: Toasts/notifications
• Avoid z-index: 9999 — use a system instead
• Debug with browser DevTools — they show stacking contexts

Mini Practice

1. Layer three colored boxes using z-index
2. Create a modal that appears above a dark overlay
3. Build a tooltip that shows on hover above other content
4. Debug a z-index issue by inspecting stacking contexts in DevTools

Up Next

Next: Overflow →