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:






    
Critical Action Warning
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:

.backdrop-mask {
    position: fixed;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
}
.modal-box {
    position: relative; /* activates z-index calculations */
    z-index: 20;        /* renders in front of the backdrop */
    background: white;
}

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.