Controlling Depth: The z-index Property in CSS

Master the third dimension of web design. Learn how z-index and stacking contexts allow you to create rich, layered interfaces.

Welcome! Let's explore how to control the layering of elements on a page using CSS.

/* Let's begin our journey into the third dimension! */

What is Stacking Order?

The z-index property specifies the stack order of an element. An element with a greater stack order is always in front of an element with a lower stack order. Think of it like a stack of papers on your desk; a higher z-index value means the paper is closer to the top.

The Role of the 'position' Property

Crucially, z-index only works on positioned elements. This means the element must have a position value of absolute, relative, fixed, or sticky. It has no effect on elements with the default position: static.

Understanding Stacking Contexts

A stacking context is a group of elements with a common parent that move together along the z-axis. A new stacking context is formed by an element that is positioned and has a z-index value other than auto. The z-index values of its children are then only meaningful within that parent context.

Practical Use Cases

Common uses for z-index include creating modal pop-ups that appear above all other content, ensuring dropdown menus overlap the main page, and designing complex, layered interfaces. Negative values are also possible, which can place an element *behind* its parent.

Practice Zone

Interactive Test 1: Drag & Drop

Drag in the corresponding order.

Drag the options:

-1

Completa el código:

This element should be on top. z-index: ______;

This element should be in the middle. z-index: ______;

This element should be behind. z-index: ______;

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

.modal-overlay {
  position: ;
  z-index: ;
}
.modal-content {
  position: ;
  z-index: ;
}

Unlock with Premium

Practice Example: Code Editor

You have three overlapping squares. Use `z-index` to make the Green square appear on top, the Blue square in the middle, and the Red square at the bottom.

Z-Index Usage Examples

Selector	Description
.red-layer	Background layer (z-index: 1, red color).
.green-layer	Middle layer (z-index: 2, green color).
.blue-layer	Front layer (z-index: 3, blue color).

* Write your CSS code using z-index and apply it to see the results.

Results:

Unlock with Premium

Knowledge Check

Which 'position' value will NOT allow z-index to work?

Unlock with Premium

A Practical Guide to Mastering z-index

`z-index` seems simple, but its interaction with stacking contexts can be tricky. This guide explores real-world scenarios to solidify your understanding.

1. Building a Modal Overlay

A classic use case. The dark overlay sits behind the modal content but above the page. This requires two different z-index values on fixed-position elements.

.overlay {
  position: fixed;
  z-index: 100;
}
.modal {
  position: fixed;
  z-index: 101;
}

Modal

2. The Stacking Context Trap

A child element's z-index can never break out of its parent's stacking context. Here, the green box has z-index: 9999, but it's trapped inside a parent with z-index: 1, so it can't appear above the blue box (z-index: 2).

.parent {
  position: relative; 
  z-index: 1;
}
.child-green {
  position: absolute;
  z-index: 9999; /* Trapped! */
}
.uncle-blue {
  position: absolute;
  z-index: 2;
}

Practical Takeaway: When your z-index isn't working, don't just increase the number. Instead, inspect the parents of the element for properties like position, z-index, opacity, or transform that create a new stacking context.

← Previous Next →