CSS · Box Model & Layout

Stacking Context

Control the layering and depth of elements with z-index

Find videos you like?

Save to resource drawer for future reference!

What is Stacking Context?

Understanding how elements layer on top of each other

Stacking context determines which elements appear on top when they overlap. The z-index property controls the stacking order, but it only works within the same stacking context!

Z-Index

Higher values appear on top

Context

Elements stack within their context

Position

Only positioned elements use z-index

1. Z-Index Basics

Control stacking order with z-index

Z-Index Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Z-Index Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>📚 Z-Index & Stacking</h1>
      <p class="subtitle">Control which elements appear on top</p>
      <div class="stack-demo">
        <div class="layer layer-1">
          <div class="layer-number">1</div>
          <div class="layer-label">z-index: 1</div>
        </div>
        <div class="layer layer-2">
          <div class="layer-number">2</div>
          <div class="layer-label">z-index: 2</div>
        </div>
        <div class="layer layer-3">
          <div class="layer-number">3</div>
          <div class="layer-label">z-index: 3</div>
        </div>
      </div>
      <div class="legend">
        <h3>💡 How Z-Index Works</h3>
        <p>
          Higher z-index values appear on top. The green box (z-index: 3) is on top,
          orange (z-index: 2) in the middle, and red (z-index: 1) at the bottom.
        </p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

💡 Z-Index Rules:

Requires positioning: Element must have position (relative, absolute, fixed, sticky)
Higher wins: Larger z-index values appear on top
Can be negative: Use negative values to go behind
Auto is default: Elements stack in source order

2. Stacking Context Problem

Understanding when new stacking contexts are created

Stacking Context Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stacking Contexts</title>
  </head>
  <body>
    <div class="container">
      <h1>🎭 Stacking Contexts</h1>
      <div class="comparison">
        <div class="demo-card">
          <h3>Without Stacking Context</h3>
          <div class="demo-area">
            <div class="parent parent-1">
              Parent (z: 1)
              <div class="child child-a">
                Child<br>(z: 999)
              </div>
            </div>
            <div class="sibling">
              Sibling<br>(z: 2)
            </div>
          </div>
          <div class="explanation">
            🎯 Child with z-index: 999 appears on top of sibling with z-index: 2 because they're in the same stacking context!
          </div>
          <div class="code">/* Parent doesn't create context */</div>
        </div>
        <div class="demo-card">
          <h3>With Stacking Context</h3>
          <div class="demo-area">
            <div class="parent parent-2">
              Parent (z: 1)
              <div class="child child-a">
                Child<br>(z: 999)
              </div>
            </div>
            <div class="sibling">
              Sibling<br>(z: 2)
            </div>
          </div>
          <div class="explanation">
            🔒 Parent creates stacking context (opacity). Now child is TRAPPED - even with z: 999, it can't escape! Sibling wins.
          </div>
          <div class="code">parent { opacity: 0.99; } /* Creates context */</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Important Concept!

When an element creates a new stacking context, its children are "trapped" inside. They can only compete with siblings of their parent, not with elements outside the context!

Properties that create stacking context:

position + z-index (not auto)
opacity less than 1
transform, filter, perspective
position: fixed or sticky
flex/grid child with z-index

3. Interactive Z-Index

Try changing the stacking order

Interactive Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Z-Index</title>
  </head>
  <body>
    <div class="container">
      <h1>🎮 Interactive Z-Index</h1>
      <p class="subtitle">Click buttons to bring cards to front</p>
      <div class="cards-container">
        <div class="card card-red" id="cardRed">
          <div class="card-number">1</div>
          <div class="card-label">Red Card</div>
        </div>
        <div class="card card-yellow" id="cardYellow">
          <div class="card-number">2</div>
          <div class="card-label">Yellow Card</div>
        </div>
        <div class="card card-green" id="cardGreen">
          <div class="card-number">3</div>
          <div class="card-label">Green Card</div>
        </div>
      </div>
      <div class="controls">
        <button class="control-btn btn-red" onclick="bringToFront('cardRed')">
          Bring Red to Front
        </button>
        <button class="control-btn btn-yellow" onclick="bringToFront('cardYellow')">
          Bring Yellow to Front
        </button>
        <button class="control-btn btn-green" onclick="bringToFront('cardGreen')">
          Bring Green to Front
        </button>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Quick Reference

Z-index and stacking context

z-index: 10;

Set stacking order (requires position)

z-index: -1;

Place behind normal elements

z-index: auto;

Default - source order determines stacking

position: relative; z-index: 1;

Creates new stacking context

Best Practices

Use sparingly: Don't z-index everything, rely on source order when possible
Use a scale: Use values like 10, 20, 30 to leave room for additions
Document your layers: Keep track of what z-index values mean in your app
Avoid z-index wars: Don't keep increasing values to "win"

Browser Support

Z-index and stacking contexts work perfectly in all browsers! Universal support since the early days of CSS.

Previous Topic

Float & Clear

Float layouts, clearing floats, clearfix techniques, and modern alternatives.

Next Topic

Combinators

Descendant ( ), child (>), adjacent sibling (+), general sibling (~) combinators.

Ask a Question

Have a question about Stacking Context? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Box Model & Layout

Stacking Context

Control the layering and depth of elements with z-index

Find videos you like?

Save to resource drawer for future reference!

What is Stacking Context?

Understanding how elements layer on top of each other

Stacking context determines which elements appear on top when they overlap. The z-index property controls the stacking order, but it only works within the same stacking context!

Z-Index

Higher values appear on top

Context

Elements stack within their context

Position

Only positioned elements use z-index

1. Z-Index Basics

Control stacking order with z-index

Z-Index Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Z-Index Basics</title>
  </head>
  <body>
    <div class="container">
      <h1>📚 Z-Index & Stacking</h1>
      <p class="subtitle">Control which elements appear on top</p>
      <div class="stack-demo">
        <div class="layer layer-1">
          <div class="layer-number">1</div>
          <div class="layer-label">z-index: 1</div>
        </div>
        <div class="layer layer-2">
          <div class="layer-number">2</div>
          <div class="layer-label">z-index: 2</div>
        </div>
        <div class="layer layer-3">
          <div class="layer-number">3</div>
          <div class="layer-label">z-index: 3</div>
        </div>
      </div>
      <div class="legend">
        <h3>💡 How Z-Index Works</h3>
        <p>
          Higher z-index values appear on top. The green box (z-index: 3) is on top,
          orange (z-index: 2) in the middle, and red (z-index: 1) at the bottom.
        </p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

💡 Z-Index Rules:

Requires positioning: Element must have position (relative, absolute, fixed, sticky)
Higher wins: Larger z-index values appear on top
Can be negative: Use negative values to go behind
Auto is default: Elements stack in source order

2. Stacking Context Problem

Understanding when new stacking contexts are created

Stacking Context Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stacking Contexts</title>
  </head>
  <body>
    <div class="container">
      <h1>🎭 Stacking Contexts</h1>
      <div class="comparison">
        <div class="demo-card">
          <h3>Without Stacking Context</h3>
          <div class="demo-area">
            <div class="parent parent-1">
              Parent (z: 1)
              <div class="child child-a">
                Child<br>(z: 999)
              </div>
            </div>
            <div class="sibling">
              Sibling<br>(z: 2)
            </div>
          </div>
          <div class="explanation">
            🎯 Child with z-index: 999 appears on top of sibling with z-index: 2 because they're in the same stacking context!
          </div>
          <div class="code">/* Parent doesn't create context */</div>
        </div>
        <div class="demo-card">
          <h3>With Stacking Context</h3>
          <div class="demo-area">
            <div class="parent parent-2">
              Parent (z: 1)
              <div class="child child-a">
                Child<br>(z: 999)
              </div>
            </div>
            <div class="sibling">
              Sibling<br>(z: 2)
            </div>
          </div>
          <div class="explanation">
            🔒 Parent creates stacking context (opacity). Now child is TRAPPED - even with z: 999, it can't escape! Sibling wins.
          </div>
          <div class="code">parent { opacity: 0.99; } /* Creates context */</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Important Concept!

When an element creates a new stacking context, its children are "trapped" inside. They can only compete with siblings of their parent, not with elements outside the context!

Properties that create stacking context:

position + z-index (not auto)
opacity less than 1
transform, filter, perspective
position: fixed or sticky
flex/grid child with z-index

3. Interactive Z-Index

Try changing the stacking order

Interactive Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Z-Index</title>
  </head>
  <body>
    <div class="container">
      <h1>🎮 Interactive Z-Index</h1>
      <p class="subtitle">Click buttons to bring cards to front</p>
      <div class="cards-container">
        <div class="card card-red" id="cardRed">
          <div class="card-number">1</div>
          <div class="card-label">Red Card</div>
        </div>
        <div class="card card-yellow" id="cardYellow">
          <div class="card-number">2</div>
          <div class="card-label">Yellow Card</div>
        </div>
        <div class="card card-green" id="cardGreen">
          <div class="card-number">3</div>
          <div class="card-label">Green Card</div>
        </div>
      </div>
      <div class="controls">
        <button class="control-btn btn-red" onclick="bringToFront('cardRed')">
          Bring Red to Front
        </button>
        <button class="control-btn btn-yellow" onclick="bringToFront('cardYellow')">
          Bring Yellow to Front
        </button>
        <button class="control-btn btn-green" onclick="bringToFront('cardGreen')">
          Bring Green to Front
        </button>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Quick Reference

Z-index and stacking context

z-index: 10;

Set stacking order (requires position)

z-index: -1;

Place behind normal elements

z-index: auto;

Default - source order determines stacking

position: relative; z-index: 1;

Creates new stacking context

Best Practices

Use sparingly: Don't z-index everything, rely on source order when possible
Use a scale: Use values like 10, 20, 30 to leave room for additions
Document your layers: Keep track of what z-index values mean in your app
Avoid z-index wars: Don't keep increasing values to "win"

Browser Support

Z-index and stacking contexts work perfectly in all browsers! Universal support since the early days of CSS.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Float & Clear

Combinators

Building Your Learning Module...

Stacking Context

Z-Index

Context

Position

Z-Index Demo

💡 Z-Index Rules:

Stacking Context Demo

Important Concept!

Interactive Demo

Best Practices

Browser Support

Float & Clear

Combinators

Stacking Context

Z-Index

Context

Position

Z-Index Demo

💡 Z-Index Rules:

Stacking Context Demo

Important Concept!

Interactive Demo

Best Practices

Browser Support