ReviseAlgo Logo

CSS Basics

Z-index

Master CSS stacking orders using z-index, covering positioned requirements, the parent stacking contexts, and click blockage prevention.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master the CSS stacking order. By the end of this topic, you will be able to:

  • Explain the role of the z-index property in 3D depth layouts.
  • Identify the positioning prerequisite required to activate z-index.
  • Calculate element stacking orders based on HTML source code structures.
  • Understand how a **Stacking Context** isolates nested elements.
  • Resolve layout layering bugs without resorting to extreme values (like z-index: 99999).

2. Overview

The z-index property controls the vertical stacking order of overlapping elements along the Z-axis (depth). It allows you to specify which elements render in front of or behind others. However, z-index only applies to positioned elements (elements with a position other than static) and is constrained by the parent element's **Stacking Context**.

3. Why This Topic Matters

Managing stacking order is critical for building overlays, dropdown menus, and modal dialogs:

  • The Z-Index Arms Race: When developers do not understand stacking contexts, they often try to resolve layering issues by using increasingly larger z-index values (like z-index: 99999). This makes stylesheet maintenance difficult.
  • Invisible Click Blockers: Overlay panels that are invisible (e.g. transparent wrappers with opacity: 0) can sit in front of buttons due to high z-index values, blocking click events.

4. Real-World Analogy

Think of positioning elements like **stacking sheets of paper on a desk**:

  • Document Source Order: Placing sheets of paper flat on the desk one after another. Sheets placed later naturally cover the sheets placed before them.
  • Z-Index (The Stacking Order): Shuffling the order of the sheets so that sheet 1 sits on top of sheet 5.
  • Stacking Contexts (Folders): Grouping sheets inside folder envelopes. If Folder A is placed underneath Folder B, then **every sheet inside Folder A stays underneath Folder B**, even if a sheet inside Folder A has a z-index of 999. It cannot break out of its parent folder's context.

5. Core Concepts

Browsers calculate stacking order from back to front using the following priority rules:

Stacking Priority Layer Category Description
1 (Back) Root Background The background color and borders of the main body document.
2 Negative Z-Index Positioned elements styled with negative z-index values (e.g. z-index: -1).
3 Block Elements Non-positioned block elements in the normal document flow.
4 Positioned Elements Elements with position values of relative, absolute, fixed, or sticky (default z-index: auto).
5 (Front) Positive Z-Index Positioned elements styled with positive z-index values (e.g. z-index: 10).

6. Syntax & API Reference

Z-index requires a positioned element to function correctly:

Stacking Context Triggers:

A new stacking context is created by the root element (<html>), but can also be triggered by:

  • Positioned elements with a z-index value other than auto.
  • Elements with an opacity value less than 1.
  • Elements utilizing transform properties (e.g. transform: scale(1)).
  • Flexbox or Grid child items styled with a z-index other than auto.

7. Visual Diagram

This diagram displays how parent stacking contexts isolate nested elements:

8. Live Example — Full Working Code

A sample HTML document showing parent stacking context encapsulation:

9. Interactive Playground

Try It Yourself Challenges:

  1. Remove the z-index: 1 property from the red folder container style sheet and note if the yellow badge now renders in front of the blue folder. (Hint: Without z-index on the parent, a new stacking context is not created, allowing the child to resolve relative to the root).
  2. Test how applying opacity: 0.99 to a parent container triggers a new stacking context.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Z-Index on static elements Attempting to stack elements without defining their position property. .box { z-index: 5; } .box { position: relative; z-index: 5; }
Z-index arms race Using massive z-index values to force elements to stack, which breaks layout systems. z-index: 99999; Understand and structure your stacking contexts and use low values.

11. Best Practices

  • Keep z-index values low and consistent: Use single-digit integers (e.g. z-index: 1, z-index: 2) to manage stacking order instead of using random high values.
  • Define positioned states to enable z-index: Always declare position: relative, absolute, or fixed on elements that require z-index properties.
  • Document stacking layers: Keep track of your application's layering tiers using comments (e.g. Header = 10, Dropdown = 20, Modal overlay = 100).
  • Resolve bugs using stacking contexts: If a high z-index element renders behind a low z-index element, check their parent containers for active stacking contexts.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
z-index and basic positioned stacking Supported Supported Supported Supported

13. Interview Questions

🟢 Q1: Explain how a Stacking Context impacts the behavior of nested z-index values.

Answer: A stacking context is created by certain element configurations (like positioned containers with a defined z-index). Once created, all child elements are grouped and stacked relative to this parent container. The child elements cannot break out of this parent context; their relative stacking is evaluated only within the parent container's context.

14. Debugging Exercise

Explain why the popup modal displays underneath the layout mask backdrop, and fix the CSS configuration:

View Solution

Diagnosis: The .modal-box element lacks a positioning property (such as position: relative). As a result, its z-index: 999 value is ignored, and it remains statically positioned, rendering behind the fixed backdrop mask. To resolve this, add positioning to the modal box selector.

Fixed CSS:

15. Practice Exercises

Exercise 1: Overlapping Card Stack

Build three overlapping card elements. Apply positioned properties and set unique z-index values on each card to manually control their front-to-back stacking order.

16. Scenario-Based Challenge

The Multi-Layer Dashboard Layout Challenge:

Your dashboard layout features a sticky navigation header (z-index: 10), a slide-out sidebar panel (z-index: 50), and floating tooltips (z-index: 100). When you open the sidebar, the tooltips and navigation header render on top of it, creating a messy overlap. Propose a z-index layout hierarchy to resolve these layering conflicts.

17. Quick Quiz

Q1: Which display or positioning style creates a new Stacking Context?

A) display: inline-block

B) position: relative with z-index: 5

C) visibility: hidden

Answer: B — Positioned elements styled with a z-index value other than auto generate a new stacking context.

18. Summary & Key Takeaways

  • • Z-index properties require relative, absolute, fixed, or sticky positioning to function.
  • • Child elements are nested inside their parent's stacking context, limiting their vertical breakout limits.

19. Cheat Sheet

Stacking context trigger Visual Layout Action
transform: translate3d(0, 0, 0); Triggers hardware acceleration and generates a new stacking context on the element.