z-index Basics: Controlling 3D Layering and Stacking Order0%

Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts

z-index Basics: Controlling 3D Layering and Stacking Order

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

z-index Basics: Controlling 3D Layering and Stacking Order

Have you ever had two elements overlap on a webpage, and the wrong element ended up on top? 🥞

Maybe a dropdown menu opened behind an image banner, or a popup dialog was covered by a sticky header.

In 2D web design, we control width on the X-axis (left-to-right) and height on the Y-axis (top-to-bottom). But web browsers also have a third dimension: the Z-axis—the depth perpendicular to your screen, pointing directly towards your eyes!

The CSS z-index property controls where an element sits along this 3D depth axis.

In this lesson, you will master:

1
The 3 axes of web design (X, Y, and Z)
2
The #1 Golden Rule of z-index
3
Default browser stacking order
4
Positive, negative, and auto z-index values
5
The infamous "Stacking Context" trap (Why z-index: 99999 doesn't always work!)

The School Textbook Stack Analogy 📚

Imagine piling your School Notebooks on your desk:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                    THE 3D STACKING ORDER EXPLAINED                      |
+-------------------------------------------------------------------------+
|                  (Your Eyes Looking Down from Above)                    |
|                                                                         |
|                     [ Top Book: Math Homework ]       z-index: 3        |
|                  [ Middle Book: Science Journal ]     z-index: 2        |
|               [ Bottom Book: History Textbook ]       z-index: 1        |
|       =================================================                 |
|                   SURFACE OF WOODEN DESK              z-index: 0        |
|       =================================================                 |
|               [ Under Desk Mat: Secret Note ]         z-index: -1       |
+-------------------------------------------------------------------------+

A higher z-index value lifts the element closer to your eyes, stacking it right on top of elements with lower numbers!

The #1 Rule of `z-index` ⚠️

This is the single most common mistake made by CSS beginners:

[!IMPORTANT] z-index ONLY works on positioned elements! An element must have its position set to relative, absolute, fixed, or sticky (or be a flex/grid child). If an element has default position: static;, adding z-index: 99999; has ZERO effect!

1/* ❌ BROKEN: Does not work on static elements! */
2.popup {
3  z-index: 100; /* Ignored because position is static by default! */
4}
5 
6/* ✅ WORKING: Positioned element */
7.popup {
8  position: relative; /* Or absolute / fixed / sticky */
9  z-index: 100;       /* Now it lifts up on the Z-axis! */
10}

Default Stacking Order (Without `z-index`)

If you never write a single z-index property in your stylesheet, how does the browser decide which element sits on top when they overlap?

The browser follows a strict natural hierarchy:

1
Background and borders of the root <html> element.
2
Normal flow blocks (standard <div>s, <p>s) in the order they appear in your HTML.
3
Positioned elements (relative, absolute, fixed, sticky).
4
HTML Order for Positioned Elements: If two positioned elements overlap, whichever element comes later in the HTML code is rendered on top!

1<!-- Box 2 will naturally render ON TOP of Box 1 because it appears later in HTML -->
2<div class="box box1" style="position: relative;">Box 1</div>
3<div class="box box2" style="position: relative; margin-top: -30px;">Box 2</div>

Controlling Depth with `z-index` Values

The z-index property accepts integer values:

1. Positive Numbers (`1`, `10`, `100`, `999`)

Pulls the element forward towards the user's eyes.

modal-overlay {
position: fixed;
z-index: 500; /* Sits comfortably on top of regular page content */
4}

2. Negative Numbers (`-1`, `-10`)

Pushes the element backward behind normal text and parent content. This is frequently used for subtle decorative background patterns, colored blurs, or watermark graphics!

watermark-logo {
position: absolute;
top: 50px;
left: 50px;
z-index: -1; /* Renders behind the text so content remains readable! */
opacity: 0.15;
7}

3. `auto` (Default)

The element has the same stacking level as its parent and does not establish a new stacking context.

The "Stacking Context" Trap 🏰

Have you ever written z-index: 999999; on a modal or dropdown, and were shocked to see it still hidden behind a header with z-index: 2;?

Welcome to the Stacking Context!

The School Sports Competition Analogy:

Imagine two competing school teams: Team Blue and Team Gold.

In Team Blue, Rohan scores 10,000 points.
But Team Blue as a whole is in Tier 1 (Lower Division).
Team Gold is in Tier 2 (Premier Division).
Even though Rohan has 10,000 individual points, he cannot outrank a member of Team Gold because Team Gold belongs to a higher division!

Visual Architecture Blueprint

+-------------------------------------------------------------+
| TEAM GOLD (Parent z-index: 2)                               |
|   - Player with z-index: 1  <-- WINS!                       |
+-------------------------------------------------------------+
| TEAM BLUE (Parent z-index: 1)                               |
|   - Rohan with z-index: 999999 <-- CAN NEVER BEAT TEAM GOLD!|
|     (Because his parent container is trapped in z-index: 1) |
+-------------------------------------------------------------+

In CSS:

If Parent A has z-index: 1 and Parent B has z-index: 2, NO child inside Parent A can ever appear in front of Parent B, no matter how gigantic its child z-index is!

To fix this, adjust the z-index of the parent container instead!

Professional `z-index` Design System

In professional software development, never throw random numbers like 99999 or 9999999 into your CSS. Maintain a clean, organized layering scale:

root {
/* Systematic z-index scale */
--z-negative: -1;   /* Decorative background patterns */
--z-normal: 1;      /* Standard elevated card elements */
--z-dropdown: 100;  /* Dropdown menus & autocomplete */
--z-sticky: 200;    /* Sticky section headers */
--z-fixed-nav: 500; /* Fixed navigation bar */
--z-modal: 1000;    /* Dialog popups and dim overlays */
--z-toast: 2000;    /* Notification toasts and alert banners */
10}

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Adding `z-index: 10` without setting `position`	Ignored by browsers on default static elements.	Always declare `position: relative;` (or absolute/fixed/sticky).
Writing absurd numbers like `z-index: 99999999`	Leads to uncontrollable "z-index wars" across teammates and components.	Use a clean, standardized scale (10, 100, 500, 1000).
Wondering why an absolute popup is covered by a sibling section	The popup is trapped in a lower parent stacking context.	Raise the `z-index` of the parent container itself.
Using negative `z-index` without testing clickability	The element can slide behind the body background, making it impossible to click.	Check that interactive links remain accessible.

Summary Cheat Sheet 📌

Z-axis represents depth perpendicular to your screen.
Positioning Requirement: z-index ONLY functions on positioned elements (relative, absolute, fixed, sticky) and flex/grid items.
Natural Order: Later HTML elements naturally render in front of earlier siblings when overlapping.
z-index: -1; layers elements behind parent content (perfect for background art).
Stacking Context: Children cannot escape the stacking level set by their parent container.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which condition is strictly required for the z-index property to take effect on an element?

Question 2

If two sibling positioned elements overlap and neither has a z-index defined, which element renders on top?

Question 3

What is the effect of setting z-index: -1; on a positioned decorative graphic inside a card?

Question 4

Card A has z-index: 1 and Card B has z-index: 2. Inside Card A, a tooltip has z-index: 99999. Can this tooltip ever display in front of Card B?

Question 5

Why is maintaining a standardized z-index scale (e.g. 100 for dropdowns, 500 for fixed headers, 1000 for modals) considered an industry best practice?

Practice Challenge (Try It Yourself)

1
Create a file named z-index-layering-lab.html.
2
Build an interactive overlapping card deck and a watermark background pattern demonstrating z-index control:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>z-index 3D Layering Lab</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 40px 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
     }
15 
     /* 1. Overlapping Card Stack */
     .card-deck {
       position: relative;
       width: 320px;
       height: 200px;
       margin-bottom: 60px;
     }
23 
     .stack-card {
       position: absolute;
       width: 280px;
       height: 140px;
       border-radius: 12px;
       padding: 16px;
       color: white;
       font-weight: bold;
       box-shadow: 0 8px 20px rgba(0,0,0,0.15);
       transition: transform 0.3s, z-index 0.3s;
       cursor: pointer;
     }
36 
     /* Card 1: Bottom Layer */
     .card-1 {
       top: 0;
       left: 0;
       background-color: #3b82f6; /* Blue */
       z-index: 1;
     }
44 
     /* Card 2: Middle Layer */
     .card-2 {
       top: 25px;
       left: 25px;
       background-color: #10b981; /* Green */
       z-index: 2;
     }
52 
     /* Card 3: Top Layer */
     .card-3 {
       top: 50px;
       left: 50px;
       background-color: #f59e0b; /* Amber */
       z-index: 3;
     }
60 
     /* Bring hovered card to the very front */
     .stack-card:hover {
       transform: translateY(-8px) scale(1.02);
       z-index: 10; /* Temporarily jump above all cards! */
     }
66 
     /* 2. Watermark Card with Negative z-index */
     .badge-container {
       position: relative;
       width: 340px;
       background-color: white;
       border-radius: 12px;
       padding: 24px;
       box-shadow: 0 4px 12px rgba(0,0,0,0.06);
       overflow: hidden;
     }
77 
     .watermark-bg {
       position: absolute;
       right: -20px;
       bottom: -20px;
       font-size: 110px;
       color: #e2e8f0;
       z-index: 0; /* Sits behind text! */
       user-select: none;
       pointer-events: none;
     }
88 
     .badge-content {
       position: relative;
       z-index: 1; /* Sits above watermark */
     }
93 
     .badge-title {
       color: #1e3a8a;
       margin-top: 0;
     }
   </style>
 </head>
 <body>
   <h2>Overlapping 3D Card Deck (Hover to Inspect)</h2>
   <div class="card-deck">
     <div class="stack-card card-1">Card 1 (z-index: 1)</div>
     <div class="stack-card card-2">Card 2 (z-index: 2)</div>
     <div class="stack-card card-3">Card 3 (z-index: 3)</div>
   </div>
107 
   <h2>Negative / Background Layering</h2>
   <div class="badge-container">
     <!-- Watermark background icon with z-index: 0 -->
     <div class="watermark-bg">🏆</div>
     <div class="badge-content">
       <h3 class="badge-title">Annual Sports Championship</h3>
       <p style="color: #475569; line-height: 1.6;">
         Notice how this text is crisp and fully readable because the golden trophy emoji is placed on a lower layer behind the text!
       </p>
     </div>
   </div>
 </body>
 </html>

1
Open this file in your browser. Notice how the cards stack, and how hovering any card lifts its z-index: 10 immediately to the top of the pile! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts (Basic Layout Techniques).

👉 Continue to Next Lesson: Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts →

Next Lesson

Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Fixed and Sticky Positioning: Headers, Floating Action Buttons, and Banners	Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts

z-index Basics: Controlling 3D Layering and Stacking Order

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

z-index Basics: Controlling 3D Layering and Stacking Order

Have you ever had two elements overlap on a webpage, and the wrong element ended up on top? 🥞

Maybe a dropdown menu opened behind an image banner, or a popup dialog was covered by a sticky header.

The CSS z-index property controls where an element sits along this 3D depth axis.

In this lesson, you will master:

1
The 3 axes of web design (X, Y, and Z)
2
The #1 Golden Rule of z-index
3
Default browser stacking order
4
Positive, negative, and auto z-index values
5
The infamous "Stacking Context" trap (Why z-index: 99999 doesn't always work!)

The School Textbook Stack Analogy 📚

Imagine piling your School Notebooks on your desk:

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                    THE 3D STACKING ORDER EXPLAINED                      |
+-------------------------------------------------------------------------+
|                  (Your Eyes Looking Down from Above)                    |
|                                                                         |
|                     [ Top Book: Math Homework ]       z-index: 3        |
|                  [ Middle Book: Science Journal ]     z-index: 2        |
|               [ Bottom Book: History Textbook ]       z-index: 1        |
|       =================================================                 |
|                   SURFACE OF WOODEN DESK              z-index: 0        |
|       =================================================                 |
|               [ Under Desk Mat: Secret Note ]         z-index: -1       |
+-------------------------------------------------------------------------+

A higher z-index value lifts the element closer to your eyes, stacking it right on top of elements with lower numbers!

The #1 Rule of `z-index` ⚠️

This is the single most common mistake made by CSS beginners:

1/* ❌ BROKEN: Does not work on static elements! */
2.popup {
3  z-index: 100; /* Ignored because position is static by default! */
4}
5 
6/* ✅ WORKING: Positioned element */
7.popup {
8  position: relative; /* Or absolute / fixed / sticky */
9  z-index: 100;       /* Now it lifts up on the Z-axis! */
10}

Default Stacking Order (Without `z-index`)

If you never write a single z-index property in your stylesheet, how does the browser decide which element sits on top when they overlap?

The browser follows a strict natural hierarchy:

1
Background and borders of the root <html> element.
2
Normal flow blocks (standard <div>s, <p>s) in the order they appear in your HTML.
3
Positioned elements (relative, absolute, fixed, sticky).
4
HTML Order for Positioned Elements: If two positioned elements overlap, whichever element comes later in the HTML code is rendered on top!

1<!-- Box 2 will naturally render ON TOP of Box 1 because it appears later in HTML -->
2<div class="box box1" style="position: relative;">Box 1</div>
3<div class="box box2" style="position: relative; margin-top: -30px;">Box 2</div>

Controlling Depth with `z-index` Values

The z-index property accepts integer values:

1. Positive Numbers (`1`, `10`, `100`, `999`)

Pulls the element forward towards the user's eyes.

modal-overlay {
position: fixed;
z-index: 500; /* Sits comfortably on top of regular page content */
4}

2. Negative Numbers (`-1`, `-10`)

Pushes the element backward behind normal text and parent content. This is frequently used for subtle decorative background patterns, colored blurs, or watermark graphics!

watermark-logo {
position: absolute;
top: 50px;
left: 50px;
z-index: -1; /* Renders behind the text so content remains readable! */
opacity: 0.15;
7}

3. `auto` (Default)

The element has the same stacking level as its parent and does not establish a new stacking context.

The "Stacking Context" Trap 🏰

Have you ever written z-index: 999999; on a modal or dropdown, and were shocked to see it still hidden behind a header with z-index: 2;?

Welcome to the Stacking Context!

The School Sports Competition Analogy:

Imagine two competing school teams: Team Blue and Team Gold.

In Team Blue, Rohan scores 10,000 points.
But Team Blue as a whole is in Tier 1 (Lower Division).
Team Gold is in Tier 2 (Premier Division).
Even though Rohan has 10,000 individual points, he cannot outrank a member of Team Gold because Team Gold belongs to a higher division!

Visual Architecture Blueprint

+-------------------------------------------------------------+
| TEAM GOLD (Parent z-index: 2)                               |
|   - Player with z-index: 1  <-- WINS!                       |
+-------------------------------------------------------------+
| TEAM BLUE (Parent z-index: 1)                               |
|   - Rohan with z-index: 999999 <-- CAN NEVER BEAT TEAM GOLD!|
|     (Because his parent container is trapped in z-index: 1) |
+-------------------------------------------------------------+

In CSS:

If Parent A has z-index: 1 and Parent B has z-index: 2, NO child inside Parent A can ever appear in front of Parent B, no matter how gigantic its child z-index is!

To fix this, adjust the z-index of the parent container instead!

Professional `z-index` Design System

In professional software development, never throw random numbers like 99999 or 9999999 into your CSS. Maintain a clean, organized layering scale:

root {
/* Systematic z-index scale */
--z-negative: -1;   /* Decorative background patterns */
--z-normal: 1;      /* Standard elevated card elements */
--z-dropdown: 100;  /* Dropdown menus & autocomplete */
--z-sticky: 200;    /* Sticky section headers */
--z-fixed-nav: 500; /* Fixed navigation bar */
--z-modal: 1000;    /* Dialog popups and dim overlays */
--z-toast: 2000;    /* Notification toasts and alert banners */
10}

Common Mistakes Beginners Make ❌

Bad Practice ❌	Why It Fails ⚠️	Better Approach ✅
Adding `z-index: 10` without setting `position`	Ignored by browsers on default static elements.	Always declare `position: relative;` (or absolute/fixed/sticky).
Writing absurd numbers like `z-index: 99999999`	Leads to uncontrollable "z-index wars" across teammates and components.	Use a clean, standardized scale (10, 100, 500, 1000).
Wondering why an absolute popup is covered by a sibling section	The popup is trapped in a lower parent stacking context.	Raise the `z-index` of the parent container itself.
Using negative `z-index` without testing clickability	The element can slide behind the body background, making it impossible to click.	Check that interactive links remain accessible.

Summary Cheat Sheet 📌

Z-axis represents depth perpendicular to your screen.
Positioning Requirement: z-index ONLY functions on positioned elements (relative, absolute, fixed, sticky) and flex/grid items.
Natural Order: Later HTML elements naturally render in front of earlier siblings when overlapping.
z-index: -1; layers elements behind parent content (perfect for background art).
Stacking Context: Children cannot escape the stacking level set by their parent container.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which condition is strictly required for the z-index property to take effect on an element?

Question 2

If two sibling positioned elements overlap and neither has a z-index defined, which element renders on top?

Question 3

What is the effect of setting z-index: -1; on a positioned decorative graphic inside a card?

Question 4

Card A has z-index: 1 and Card B has z-index: 2. Inside Card A, a tooltip has z-index: 99999. Can this tooltip ever display in front of Card B?

Question 5

Why is maintaining a standardized z-index scale (e.g. 100 for dropdowns, 500 for fixed headers, 1000 for modals) considered an industry best practice?

Practice Challenge (Try It Yourself)

1
Create a file named z-index-layering-lab.html.
2
Build an interactive overlapping card deck and a watermark background pattern demonstrating z-index control:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>z-index 3D Layering Lab</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 40px 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
     }
15 
     /* 1. Overlapping Card Stack */
     .card-deck {
       position: relative;
       width: 320px;
       height: 200px;
       margin-bottom: 60px;
     }
23 
     .stack-card {
       position: absolute;
       width: 280px;
       height: 140px;
       border-radius: 12px;
       padding: 16px;
       color: white;
       font-weight: bold;
       box-shadow: 0 8px 20px rgba(0,0,0,0.15);
       transition: transform 0.3s, z-index 0.3s;
       cursor: pointer;
     }
36 
     /* Card 1: Bottom Layer */
     .card-1 {
       top: 0;
       left: 0;
       background-color: #3b82f6; /* Blue */
       z-index: 1;
     }
44 
     /* Card 2: Middle Layer */
     .card-2 {
       top: 25px;
       left: 25px;
       background-color: #10b981; /* Green */
       z-index: 2;
     }
52 
     /* Card 3: Top Layer */
     .card-3 {
       top: 50px;
       left: 50px;
       background-color: #f59e0b; /* Amber */
       z-index: 3;
     }
60 
     /* Bring hovered card to the very front */
     .stack-card:hover {
       transform: translateY(-8px) scale(1.02);
       z-index: 10; /* Temporarily jump above all cards! */
     }
66 
     /* 2. Watermark Card with Negative z-index */
     .badge-container {
       position: relative;
       width: 340px;
       background-color: white;
       border-radius: 12px;
       padding: 24px;
       box-shadow: 0 4px 12px rgba(0,0,0,0.06);
       overflow: hidden;
     }
77 
     .watermark-bg {
       position: absolute;
       right: -20px;
       bottom: -20px;
       font-size: 110px;
       color: #e2e8f0;
       z-index: 0; /* Sits behind text! */
       user-select: none;
       pointer-events: none;
     }
88 
     .badge-content {
       position: relative;
       z-index: 1; /* Sits above watermark */
     }
93 
     .badge-title {
       color: #1e3a8a;
       margin-top: 0;
     }
   </style>
 </head>
 <body>
   <h2>Overlapping 3D Card Deck (Hover to Inspect)</h2>
   <div class="card-deck">
     <div class="stack-card card-1">Card 1 (z-index: 1)</div>
     <div class="stack-card card-2">Card 2 (z-index: 2)</div>
     <div class="stack-card card-3">Card 3 (z-index: 3)</div>
   </div>
107 
   <h2>Negative / Background Layering</h2>
   <div class="badge-container">
     <!-- Watermark background icon with z-index: 0 -->
     <div class="watermark-bg">🏆</div>
     <div class="badge-content">
       <h3 class="badge-title">Annual Sports Championship</h3>
       <p style="color: #475569; line-height: 1.6;">
         Notice how this text is crisp and fully readable because the golden trophy emoji is placed on a lower layer behind the text!
       </p>
     </div>
   </div>
 </body>
 </html>

1
Open this file in your browser. Notice how the cards stack, and how hovering any card lifts its z-index: 10 immediately to the top of the pile! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts (Basic Layout Techniques).

👉 Continue to Next Lesson: Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts →

Next Lesson

Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Fixed and Sticky Positioning: Headers, Floating Action Buttons, and Banners	Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

z-index Basics: Controlling 3D Layering and Stacking Order

The School Textbook Stack Analogy 📚

The #1 Rule of z-index ⚠️

Default Stacking Order (Without z-index)

Controlling Depth with z-index Values

1. Positive Numbers (1, 10, 100, 999)

2. Negative Numbers (-1, -10)

3. auto (Default)

The "Stacking Context" Trap 🏰

The School Sports Competition Analogy:

In CSS:

Professional z-index Design System

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts

Related Lessons

Practice Quiz

Loading Page Content...

z-index Basics: Controlling 3D Layering and Stacking Order

The School Textbook Stack Analogy 📚

The #1 Rule of z-index ⚠️

Default Stacking Order (Without z-index)

Controlling Depth with z-index Values

1. Positive Numbers (1, 10, 100, 999)

2. Negative Numbers (-1, -10)

3. auto (Default)

The "Stacking Context" Trap 🏰

The School Sports Competition Analogy:

In CSS:

Professional z-index Design System

Common Mistakes Beginners Make ❌

Summary Cheat Sheet 📌

Practice Quiz

Practice Challenge (Try It Yourself)

🚀 What's Next?

Float and Clear Basics: Wrapping Text Around Images and Legacy Layouts

Related Lessons

Practice Quiz

The #1 Rule of `z-index` ⚠️

Default Stacking Order (Without `z-index`)

Controlling Depth with `z-index` Values

1. Positive Numbers (`1`, `10`, `100`, `999`)

2. Negative Numbers (`-1`, `-10`)

3. `auto` (Default)

Professional `z-index` Design System

The #1 Rule of `z-index` ⚠️

Default Stacking Order (Without `z-index`)

Controlling Depth with `z-index` Values

1. Positive Numbers (`1`, `10`, `100`, `999`)

2. Negative Numbers (`-1`, `-10`)

3. `auto` (Default)

Professional `z-index` Design System