Z-Index Playground

1. 🎯 Z-Index Basics

Higher z-index = appears on top. Green (z-index:3) → Blue (z-index:2) → Red (z-index:1)

Red
z-index: 1

Blue
z-index: 2

Green
z-index: 3

.box-red { position: absolute; z-index: 1; } /* Bottom */
.box-blue { position: absolute; z-index: 2; } /* Middle */
.box-green { position: absolute; z-index: 3; } /* Top */

2. 📄 Without Z-Index (Default Order)

Without z-index, elements stack in the order they appear in HTML. Later elements appear on top.

Red
(first in HTML)

Blue
(second in HTML)

Green
(third in HTML - ON TOP)

/* No z-index set - later HTML elements appear on top */
/* Red (first) → Blue (second) → Green (third) appears on top */

3. ⬇️ Lower Z-Index Goes Behind

Red (z-index:10) is on top, even though it appears first in HTML.

Red
z-index: 10

Blue
z-index: 5

Green
z-index: 1

.box-red { z-index: 10; } /* Highest - ON TOP */
.box-blue { z-index: 5; } /* Middle */
.box-green { z-index: 1; } /* Lowest - BEHIND */

4. ⬇️ Negative Z-Index

Negative z-index puts element behind its parent.

Parent (z-index: auto)

Child (z-index: -1)
Goes behind parent

.parent { position: relative; background: blue; }
.child {
position: absolute;
z-index: -1; /* Goes behind parent */
}

5. 🏗️ Stacking Context (Nested Elements)

Each parent creates its own stacking context. Z-index only compares within the same parent.

Parent A (z-index: auto)

Child A1
z-index: 1

Child A2
z-index: 2

Parent B (z-index: auto)

Child B1
z-index: 2

Child B2
z-index: 1

/* Each parent has its OWN stacking context */
/* Child z-index only compares within its parent */
.parent-a { position: relative; }
.parent-b { position: relative; }
/* Children in Parent A cannot overlap children in Parent B */

6. 💡 Practical Use: Modal Overlay

Modal overlay covers everything with high z-index. The modal card has even higher z-index.

/* Modal overlay - covers everything */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 100;
}

.modal-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101; /* Higher than overlay */
}

7. 🔽 Dropdown Menu (Z-Index Required)

Dropdown needs high z-index to appear above other content.

Other content here. Dropdown with high z-index appears above.

.dropdown-content {
position: absolute;
z-index: 1000; /* High value to appear above everything */
}

📚 Z-Index Reference Table

Rule	Explanation
Higher z-index = on top	z-index: 100 appears above z-index: 50
Need position	z-index only works on positioned elements (relative, absolute, fixed, sticky)
Default is auto	No z-index = elements stack in HTML order
Negative z-index	Goes behind parent element
Stacking context	Each positioned parent creates its own stacking layer
Common values	Dropdowns: 1000, Modals: 2000, Notifications: 3000

⚡ Quick Reference Card

/* Remember these z-index rules */

/* 1. Higher number = on top */
z-index: 100; /* Appears above z-index: 50 */

/* 2. Must have position set */
position: relative; /* or absolute, fixed, sticky */
z-index: 10;

/* 3. Common z-index values */
z-index: 1; /* Slight lift */
z-index: 100; /* Dropdowns */
z-index: 1000; /* Modals */
z-index: 10000; /* Notifications, tooltips */

/* 4. Without z-index, HTML order wins */
/* Last element in HTML appears on top */

/* 5. Negative puts element behind */
z-index: -1; /* Goes behind parent */

🧠 Quick Quiz

/* Question 1: Which appears on top: z-index: 10 or z-index: 100? */ /* Answer: z-index: 100 (higher number = on top) */ /* Question 2: Does z-index work on static elements? */ /* Answer: No. Element needs position: relative/absolute/fixed/sticky */ /* Question 3: What happens if two elements have the same z-index? */ /* Answer: The one that appears later in HTML is on top */ /* Question 4: What is a typical z-index for a modal? */ /* Answer: 1000 or higher */ /* Question 5: What does z-index: -1 do? */ /* Answer: Puts element behind its parent */