🧱 CSS Tutorial: z-index

📌 Introduction

The z-index property in CSS controls the stacking order of elements — meaning which element appears on top when elements overlap. It is essential when building UI components like modals, dropdowns, tooltips, sticky headers, and layered designs. Understanding z-index requires understanding **positioning** and **stacking contexts**. 🧠✨

🎯 What Does z-index Affect?

  • Controls which element appears in front or behind
  • Works only on positioned elements (relative, absolute, fixed, sticky)
  • Creates new stacking contexts in certain conditions
  • Critical for building layered UI systems

✨ Syntax

Syntax

selector {
  z-index: <number> | auto;
}

Note

Only elements with a non-static position respond to z-index.
(position: relative, absolute, fixed, sticky)

🧩 z-index Values

1. auto (default)

Uses the natural stacking order based on HTML flow, without forcing a new layer.

auto

z-index: auto;

2. Positive Numbers

Higher value → element appears above others.

positive

z-index: 10;

3. Negative Numbers

Allows placing element behind others in the stacking order.

negative

z-index: -1;

🔥 Important Concept: Stacking Context

A **stacking context** is like a special layer that contains its own set of z-index rules. Elements inside one stacking context cannot overlap elements in a different oneusing z-index alone.

🧠 When is a new stacking context created?

  • An element with position + z-index other than auto
  • opacity < 1
  • transform applied (e.g., scale, rotate)
  • filter applied
  • isolation: isolate
  • mix-blend-mode
  • will-change

Note

If something isn't layering correctly, it's almost always due to stacking context—not the z-index number.

🔥 Practical Examples

1. Basic Layering

Basic Example

.top {
  position: relative;
  z-index: 10;
}

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

2. Using Negative z-index

Negative

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

3. Modal Over Everything

Modal

.modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
}

4. Bug Example: transform creates stacking context

transform issue

.parent {
  transform: scale(1);
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 9999; /* won't escape the parent stacking context */
}

5. Tooltip Example

Tooltip

.tooltip {
  position: absolute;
  z-index: 100;
}

6. Header Above Content

Sticky Header

header {
  position: sticky;
  top: 0;
  z-index: 50;
}

📊 Stacking Order (Default without z-index)

Order (lowest → highest)What
1background/border
2normal content
3positioned elements (z-index: auto)
4positioned elements with z-index

🧠 Tips to Avoid z-index Bugs

  • Always check if an element creates a stacking context
  • Keep a z-index scale (e.g., 100 for popup, 1000 for modal)
  • Use isolation: isolate; to control stacking contexts
  • Avoid unnecessarily large z-index values
  • Debug using browser DevTools → Layers panel
>>“z-index isn't about higher numbers — it’s about understanding stacking contexts.”

🎉 Conclusion

The z-index property is vital for controlling how elements overlap in modern UIs. But it becomes truly powerful only when paired with an understanding of stacking contexts and positioned elements. Master this concept and you'll never struggle with layering issues again — from modals to tooltips to dropdowns. 🚀