Bird
Raised Fist0
CSSmarkup~5 mins

Stacking context in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction
Stacking context helps decide which elements appear on top when they overlap on a webpage.
When you want to control which box appears above another in a design.
When elements overlap and you want to fix which one is clickable.
When creating dropdown menus or popups that should appear above other content.
When you want to manage layering of shadows, images, or text.
When debugging why some elements hide behind others unexpectedly.
Syntax
CSS
/* Create a stacking context by setting position and z-index */
.selector {
  position: relative; /* or absolute, fixed, sticky */
  z-index: 10; /* any integer value */
}
A stacking context is like a new layer where child elements stack inside it.
Only elements with position and z-index or certain CSS properties create stacking contexts.
Examples
Two boxes with different z-index values; box2 appears above box1.
CSS
.box1 {
  position: relative;
  z-index: 1;
}
.box2 {
  position: relative;
  z-index: 2;
}
Opacity creates a stacking context even without position and z-index on the container.
CSS
.container {
  opacity: 0.9;
}
.child {
  position: absolute;
  z-index: 5;
}
z-index only works if position is not static.
CSS
.empty {
  /* No stacking context because no position or z-index */
}
.single {
  position: static;
  z-index: 10; /* ignored because position is static */
}
Fixed and absolute positioned elements create stacking contexts with their z-index.
CSS
.fixed {
  position: fixed;
  z-index: 100;
}
.absolute {
  position: absolute;
  z-index: 50;
}
Sample Program
This example shows three overlapping colored boxes with different z-index values. The red box is on top because it has the highest z-index. The blue box is below it, and the green box is at the bottom. This demonstrates how stacking context controls which element appears above others.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stacking Context Example</title>
<style>
  body {
    margin: 2rem;
    font-family: Arial, sans-serif;
  }
  .box1 {
    position: relative;
    z-index: 1;
    width: 10rem;
    height: 10rem;
    background-color: lightblue;
    border: 2px solid blue;
    padding: 1rem;
  }
  .box2 {
    position: relative;
    z-index: 2;
    width: 10rem;
    height: 10rem;
    background-color: lightcoral;
    border: 2px solid red;
    margin-top: -6rem;
    margin-left: 4rem;
    padding: 1rem;
  }
  .box3 {
    position: relative;
    z-index: 0;
    width: 10rem;
    height: 10rem;
    background-color: lightgreen;
    border: 2px solid green;
    margin-top: -6rem;
    margin-left: 8rem;
    padding: 1rem;
  }
</style>
</head>
<body>
  <h1>Stacking Context Demo</h1>
  <p>Boxes overlap. The red box (z-index: 2) appears on top, then blue (z-index: 1), then green (z-index: 0).</p>
  <div class="box1">Blue box (z-index: 1)</div>
  <div class="box2">Red box (z-index: 2)</div>
  <div class="box3">Green box (z-index: 0)</div>
</body>
</html>
OutputSuccess
Important Notes
Creating a stacking context changes how elements stack inside it, isolating them from outside layers.
Common mistake: setting z-index without position (relative, absolute, fixed, sticky) does nothing.
Stacking context can also be created by CSS properties like opacity less than 1, transform, filter, and flex containers with z-index.
Summary
Stacking context controls which elements appear on top when they overlap.
You create stacking contexts by using position with z-index or certain CSS properties.
Elements inside a stacking context stack only among themselves, separate from outside elements.

Practice

(1/5)
1. What creates a new stacking context in CSS?
easy
A. An element with color property set
B. An element with position: relative and z-index set
C. Any element with display: block
D. An element with margin applied

Solution

  1. Step 1: Understand stacking context creation

    A stacking context is created by elements with position other than static and a z-index value set.

  2. Step 2: Analyze options

    Only An element with position: relative and z-index set mentions position: relative with z-index, which creates a stacking context. Other options do not create stacking contexts.

  3. Final Answer:

    An element with position: relative and z-index set -> Option B

  4. Quick Check:

    Stacking context = position + z-index [OK]
Hint: Look for position plus z-index to spot stacking contexts [OK]
Common Mistakes:
  • Thinking any positioned element creates stacking context without z-index
  • Confusing display or color properties with stacking context
  • Assuming margin affects stacking order
2. Which CSS snippet correctly creates a stacking context?
easy
A. position: static; z-index: 10;
B. display: inline; z-index: 3;
C. position: relative; z-index: 5;
D. color: red; z-index: 1;

Solution

  1. Step 1: Check position and z-index combination

    Only elements with position other than static and a z-index value create stacking contexts.

  2. Step 2: Evaluate each option

    position: relative; z-index: 5; uses position: relative and z-index: 5, which correctly creates a stacking context. Others either have static position or irrelevant properties.

  3. Final Answer:

    position: relative; z-index: 5; -> Option C

  4. Quick Check:

    Position relative + z-index creates stacking context [OK]
Hint: Position must not be static to create stacking context [OK]
Common Mistakes:
  • Using position static with z-index expecting stacking context
  • Assuming display or color create stacking contexts
  • Ignoring that inline elements don't create stacking contexts with z-index
3. Given this HTML and CSS, which element appears on top visually?
<div class='parent'>
  <div class='child1'>Child 1</div>
  <div class='child2'>Child 2</div>
</div>

.parent { position: relative; z-index: 1; }
.child1 { position: absolute; z-index: 2; }
.child2 { position: absolute; z-index: 1; }
medium
A. Parent appears on top of children
B. Child 2 appears on top
C. Both overlap equally, no stacking order
D. Child 1 appears on top

Solution

  1. Step 1: Identify stacking contexts

    The parent has position: relative and z-index: 1, creating a stacking context. Children stack inside this context.

  2. Step 2: Compare children's z-index inside stacking context

    Child 1 has z-index: 2, child 2 has z-index: 1. Higher z-index means it appears on top.

  3. Final Answer:

    Child 1 appears on top -> Option D

  4. Quick Check:

    Higher z-index inside stacking context = on top [OK]
Hint: Higher z-index inside same stacking context is on top [OK]
Common Mistakes:
  • Ignoring stacking context created by parent
  • Assuming parent overlays children
  • Confusing absolute positioning with stacking order
4. Why does this CSS not create a stacking context as expected?
.box { position: absolute; }

What is missing?
medium
A. Missing z-index property
B. Position should be static
C. Need display: block
D. Color property must be set

Solution

  1. Step 1: Understand stacking context requirements

    Positioned elements create stacking contexts only if z-index is set.

  2. Step 2: Analyze given CSS

    The element has position: absolute but no z-index, so no stacking context is created.

  3. Final Answer:

    Missing z-index property -> Option A

  4. Quick Check:

    Position alone doesn't create stacking context without z-index [OK]
Hint: Position plus z-index needed for stacking context [OK]
Common Mistakes:
  • Assuming position absolute alone creates stacking context
  • Thinking display or color affect stacking context
  • Confusing static position with stacking context creation
5. You have nested elements:
<div class='outer'>
  <div class='inner'>Content</div>
</div>

CSS:
.outer { position: relative; z-index: 1; }
.inner { position: relative; z-index: 10; }

Which statement is true about their stacking order?
hard
A. Inner's z-index 10 stacks only inside outer's stacking context
B. Inner's z-index 10 places it above all elements outside outer
C. Outer and inner share the same stacking context ignoring z-index
D. Inner's z-index is ignored because outer has lower z-index

Solution

  1. Step 1: Identify stacking contexts

    The outer element creates a stacking context with position: relative and z-index: 1. The inner element creates a new stacking context inside outer with position: relative and z-index: 10.

  2. Step 2: Understand stacking context isolation

    Inner's stacking order is only relative to siblings inside outer's stacking context. It cannot escape outer's stacking context to appear above elements outside it.

  3. Final Answer:

    Inner's z-index 10 stacks only inside outer's stacking context -> Option A

  4. Quick Check:

    Nested stacking contexts isolate z-index scope [OK]
Hint: Nested stacking contexts isolate z-index effects [OK]
Common Mistakes:
  • Thinking inner z-index affects outside elements
  • Assuming stacking contexts merge ignoring nesting
  • Believing outer's lower z-index cancels inner's stacking