0Pricing
CSS Academy · Lesson

Z-index and Stacking Context

Control which elements appear on top using z-index and understand stacking contexts.

Z-index and Stacking Context is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is z-index?

z-index controls the stacking order of positioned elements along the Z axis (front to back). Higher values appear on top of lower values when elements overlap.

z-index Only Works on Positioned Elements

z-index has no effect on elements with position: static (the default). You must have relative, absolute, fixed, or sticky for z-index to apply.

.popup {
  position: relative; /* or absolute/fixed */
  z-index: 10;
}

Default Stacking Order

Without explicit z-index, elements stack in this order (back to front):

  1. Root element background
  2. Block-level elements (in flow order)
  3. Floated elements
  4. Inline elements
  5. Positioned elements with z-index: auto or 0

Stacking Context

A stacking context is a layer of elements with a common z-axis. Z-index values only compete within the same stacking context. An element inside a stacking context cannot be placed above elements outside it, regardless of z-index value.

What Creates a Stacking Context?

A new stacking context is created by:

  • position + z-index other than auto
  • opacity less than 1
  • transform, filter, perspective applied
  • will-change on specific properties
  • isolation: isolate
  • Flex/grid children with z-index

Stacking Context Isolation

Use isolation: isolate to create a stacking context intentionally without any visual side effects. Useful for UI components that need to contain their own z-index layers.

.modal-wrapper {
  isolation: isolate;
}

The z-index Scale Problem

Projects often suffer from "z-index wars" where developers compete by escalating values to 9999 or 99999. Solve this with a named z-index scale using CSS variables:

:root {
  --z-base:    1;
  --z-dropdown: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;
}

Negative z-index

Negative z-index values place elements behind the containing block's background. This can be used for decorative pseudo-element layers placed behind content.

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(...);
  z-index: -1;
}

Debugging Stacking Issues

When a modal or tooltip appears behind another element, the culprit is usually a stacking context on an ancestor with a low z-index. Use DevTools's 3D View or check opacity, transform, and filter on parent elements.

z-index in Flex and Grid

Flex and grid items can use z-index directly without explicitly setting position. The browser treats them as positioned for the purpose of stacking.

.grid-item:hover {
  z-index: 2;
  transform: scale(1.05);
}

Fixed Modals and z-index

Modals should be direct children of <body> (or a top-level wrapper) to escape ancestor stacking contexts. The HTML <dialog> element handles this natively in the browser's top layer.

Quick Check

Two overlapping elements both have z-index: 100 in different parent stacking contexts. What determines which appears on top?

Recap

z-index controls front-to-back stacking of positioned elements. Stacking contexts isolate z-index competition. Anything that creates a stacking context on a parent can trap child z-index values. Use isolation: isolate to create explicit boundaries and CSS variables for a z-index scale.

Frequently asked questions

Is the “Z-index and Stacking Context” lesson free?

Yes — the full text of “Z-index and Stacking Context” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Z-index and Stacking Context”?

Control which elements appear on top using z-index and understand stacking contexts. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Z-index and Stacking Context” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Static and Relative Positioning
  2. Absolute Positioning and Containing Block
  3. Fixed and Sticky Positioning
  4. Z-index and Stacking Context
← Back to CSS Academy