CSS Z-Index

Master CSS z-index to control the stacking order of positioned elements and create layered interfaces.

The z-index property controls the stacking order of positioned elements. Elements with higher z-index values appear in front of elements with lower values.

Basic Usage

.element {
  position: relative; /* Position required for z-index to work */
  z-index: 10;
}

Important

Z-index only works on positioned elements (position: relative, absolute, fixed, or sticky). It has no effect on position: static (the default).

Z-Index Values

.element {
  z-index: auto; /* Default - follows stacking context */
  z-index: 0; /* Creates new stacking context */
  z-index: 1; /* Positive integer */
  z-index: 100;
  z-index: 9999;
  z-index: -1; /* Negative integer - behind auto/0 */
}

Stacking Order (Default)

Without z-index, stacking order follows these rules (back to front):

Background and borders of root element
Non-positioned blocks (in HTML order)
Non-positioned floats
Non-positioned inline elements
Positioned elements (in HTML order)

How Z-Index Works

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  
  .box1 {
    background-color: #3498db;
    top: 20px;
    left: 20px;
    z-index: 1;
  }
  
  .box2 {
    background-color: #e74c3c;
    top: 50px;
    left: 50px;
    z-index: 2; /* Appears on top */
  }
  
  .box3 {
    background-color: #2ecc71;
    top: 80px;
    left: 80px;
    z-index: 3; /* Appears on top of both */
  }
</style>
</head>
<body>
  <div class="box box1">Z-Index: 1</div>
  <div class="box box2">Z-Index: 2</div>
  <div class="box box3">Z-Index: 3</div>
</body>
</html>

Stacking Contexts

A stacking context is like a layer in Photoshop. Elements within a stacking context can only compete with siblings.

Creating Stacking Contexts

Stacking contexts are created by:

Root element (<html>)
Positioned elements with z-index other than auto
Elements with opacity less than 1
Elements with transform, filter, perspective, etc.
Elements with position: fixed or position: sticky
Flex/Grid items with z-index other than auto

/* Creates new stacking context */
.context {
  position: relative;
  z-index: 0; /* or any integer */
}

/* Also creates stacking context */
.also-context {
  opacity: 0.99;
  /* or */
  transform: translateZ(0);
  /* or */
  filter: blur(0);
}

Stacking Context Example

<style>
  .parent1 {
    position: relative;
    z-index: 1;
  }
  
  .child1 {
    position: relative;
    z-index: 9999; /* Can't exceed parent context */
  }
  
  .parent2 {
    position: relative;
    z-index: 2; /* Higher than parent1, so appears on top */
  }
  
  .child2 {
    position: relative;
    z-index: 1; /* Still appears above child1 */
  }
</style>

<div class="parent1">
  <div class="child1">I'm child1 (z-index: 9999)</div>
</div>

<div class="parent2">
  <div class="child2">I'm child2 (z-index: 1) but I appear on top!</div>
</div>

Common Use Cases

Modal/Overlay

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

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

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1; /* Above modal content */
}

.nav {
  position: relative;
  z-index: 100;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101; /* Above nav */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Above content */
}

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

Tooltips

.tooltip-container {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999; /* Above everything */
}

Z-Index Scale

Use a consistent z-index scale:

/* Z-Index Scale */
:root {
  --z-below: -1;
  --z-normal: 0;
  --z-above: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

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

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

Debugging Z-Index Issues

Common Problems

Problem 1: Z-Index Not Working

/* Problem: Element not positioned */
.element {
  z-index: 999; /* Won't work! */
}

/* Solution: Add position */
.element {
  position: relative;
  z-index: 999;
}

Problem 2: Child Can't Exceed Parent

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

.child {
  position: relative;
  z-index: 9999; /* Can't exceed parent's context */
}

/* Solution: Remove z-index from parent or restructure HTML */
.parent {
  position: relative;
  /* Don't set z-index if not needed */
}

Problem 3: Transform Creates Context

/* Problem: Transform creates stacking context */
.parent {
  transform: translateZ(0);
  /* Creates stacking context */
}

.child {
  position: relative;
  z-index: 9999; /* Limited to parent context */
}

Best Practices

Z-Index Best Practices

Use a consistent z-index scale (e.g., increments of 10 or 100)
Document your z-index values
Avoid arbitrarily large values (9999, 99999)
Keep z-index values as low as possible
Group related z-index values
Use CSS custom properties for z-index values
Understand stacking contexts before debugging
Position only when necessary
Test your stacking order thoroughly
Consider using a z-index management system for large projects

Z-Index Organization

/* Organized z-index system */
/* Base layer: -1 to 0 */
.background-pattern {
  position: relative;
  z-index: -1;
}

/* Content layer: 1-99 */
.content {
  position: relative;
  z-index: 1;
}

.card-elevated {
  position: relative;
  z-index: 10;
}

/* Navigation layer: 100-199 */
.nav {
  position: fixed;
  z-index: 100;
}

.dropdown {
  position: absolute;
  z-index: 110;
}

/* Overlay layer: 200-299 */
.sidebar {
  position: fixed;
  z-index: 200;
}

/* Modal layer: 300-399 */
.modal-backdrop {
  position: fixed;
  z-index: 300;
}

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

/* Notification layer: 400-499 */
.notification {
  position: fixed;
  z-index: 400;
}

/* Tooltip layer: 500-599 */
.tooltip {
  position: absolute;
  z-index: 500;
}

Tools for Debugging

Browser DevTools - Inspect element's computed z-index
3D View (Firefox) - Visualize stacking contexts
Layers Panel (Chrome) - See layer composition
Z-Index Highlighter - Browser extensions

Browser Support

Z-index has excellent browser support across all modern browsers.

Summary

Key points:

Z-index only works on positioned elements
Higher values appear in front
Stacking contexts create boundaries
Use a consistent z-index scale
Understand stacking contexts to debug issues
Keep values organized and documented

Master z-index to create professional layered interfaces!

The z-index property controls the stacking order of positioned elements. Elements with higher z-index values appear in front of elements with lower values.

Basic Usage

.element {
  position: relative; /* Position required for z-index to work */
  z-index: 10;
}

Important

Z-index only works on positioned elements (position: relative, absolute, fixed, or sticky). It has no effect on position: static (the default).

Z-Index Values

.element {
  z-index: auto; /* Default - follows stacking context */
  z-index: 0; /* Creates new stacking context */
  z-index: 1; /* Positive integer */
  z-index: 100;
  z-index: 9999;
  z-index: -1; /* Negative integer - behind auto/0 */
}

Stacking Order (Default)

Without z-index, stacking order follows these rules (back to front):

Background and borders of root element
Non-positioned blocks (in HTML order)
Non-positioned floats
Non-positioned inline elements
Positioned elements (in HTML order)

How Z-Index Works

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  
  .box1 {
    background-color: #3498db;
    top: 20px;
    left: 20px;
    z-index: 1;
  }
  
  .box2 {
    background-color: #e74c3c;
    top: 50px;
    left: 50px;
    z-index: 2; /* Appears on top */
  }
  
  .box3 {
    background-color: #2ecc71;
    top: 80px;
    left: 80px;
    z-index: 3; /* Appears on top of both */
  }
</style>
</head>
<body>
  <div class="box box1">Z-Index: 1</div>
  <div class="box box2">Z-Index: 2</div>
  <div class="box box3">Z-Index: 3</div>
</body>
</html>

Stacking Contexts

A stacking context is like a layer in Photoshop. Elements within a stacking context can only compete with siblings.

Creating Stacking Contexts

Stacking contexts are created by:

Root element (<html>)
Positioned elements with z-index other than auto
Elements with opacity less than 1
Elements with transform, filter, perspective, etc.
Elements with position: fixed or position: sticky
Flex/Grid items with z-index other than auto

/* Creates new stacking context */
.context {
  position: relative;
  z-index: 0; /* or any integer */
}

/* Also creates stacking context */
.also-context {
  opacity: 0.99;
  /* or */
  transform: translateZ(0);
  /* or */
  filter: blur(0);
}

Stacking Context Example

<style>
  .parent1 {
    position: relative;
    z-index: 1;
  }
  
  .child1 {
    position: relative;
    z-index: 9999; /* Can't exceed parent context */
  }
  
  .parent2 {
    position: relative;
    z-index: 2; /* Higher than parent1, so appears on top */
  }
  
  .child2 {
    position: relative;
    z-index: 1; /* Still appears above child1 */
  }
</style>

<div class="parent1">
  <div class="child1">I'm child1 (z-index: 9999)</div>
</div>

<div class="parent2">
  <div class="child2">I'm child2 (z-index: 1) but I appear on top!</div>
</div>

Common Use Cases

Modal/Overlay

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

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

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1; /* Above modal content */
}

.nav {
  position: relative;
  z-index: 100;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101; /* Above nav */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Above content */
}

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

Tooltips

.tooltip-container {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999; /* Above everything */
}

Z-Index Scale

Use a consistent z-index scale:

/* Z-Index Scale */
:root {
  --z-below: -1;
  --z-normal: 0;
  --z-above: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

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

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

/* Problem: Element not positioned */
.element {
  z-index: 999; /* Won't work! */
}

/* Solution: Add position */
.element {
  position: relative;
  z-index: 999;
}

Problem 2: Child Can't Exceed Parent

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

.child {
  position: relative;
  z-index: 9999; /* Can't exceed parent's context */
}

/* Solution: Remove z-index from parent or restructure HTML */
.parent {
  position: relative;
  /* Don't set z-index if not needed */
}

Problem 3: Transform Creates Context

/* Problem: Transform creates stacking context */
.parent {
  transform: translateZ(0);
  /* Creates stacking context */
}

.child {
  position: relative;
  z-index: 9999; /* Limited to parent context */
}

Best Practices

Z-Index Best Practices

Use a consistent z-index scale (e.g., increments of 10 or 100)
Document your z-index values
Avoid arbitrarily large values (9999, 99999)
Keep z-index values as low as possible
Group related z-index values
Use CSS custom properties for z-index values
Understand stacking contexts before debugging
Position only when necessary
Test your stacking order thoroughly
Consider using a z-index management system for large projects

Z-Index Organization

/* Organized z-index system */
/* Base layer: -1 to 0 */
.background-pattern {
  position: relative;
  z-index: -1;
}

/* Content layer: 1-99 */
.content {
  position: relative;
  z-index: 1;
}

.card-elevated {
  position: relative;
  z-index: 10;
}

/* Navigation layer: 100-199 */
.nav {
  position: fixed;
  z-index: 100;
}

.dropdown {
  position: absolute;
  z-index: 110;
}

/* Overlay layer: 200-299 */
.sidebar {
  position: fixed;
  z-index: 200;
}

/* Modal layer: 300-399 */
.modal-backdrop {
  position: fixed;
  z-index: 300;
}

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

/* Notification layer: 400-499 */
.notification {
  position: fixed;
  z-index: 400;
}

/* Tooltip layer: 500-599 */
.tooltip {
  position: absolute;
  z-index: 500;
}

Tools for Debugging

Browser DevTools - Inspect element's computed z-index
3D View (Firefox) - Visualize stacking contexts
Layers Panel (Chrome) - See layer composition
Z-Index Highlighter - Browser extensions

Browser Support

Z-index has excellent browser support across all modern browsers.

Summary

Key points:

Z-index only works on positioned elements
Higher values appear in front
Stacking contexts create boundaries
Use a consistent z-index scale
Understand stacking contexts to debug issues
Keep values organized and documented

Master z-index to create professional layered interfaces!

CSS Z-Index

On this page

CSS Z-Index

On this page