0
0
CSSmarkup~5 mins

Stacking context in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.