z-index — stacking order

z-index controls which element appears on top when they overlap. Higher = on top. Only works on positioned elements.

style.css v3.1

style.css — the CSS rules

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  padding: 10px;
  color: white;
  border-radius: 6px;
}
.red    { background: #f85149; top: 0;   left: 0;   z-index: 1; }
.green  { background: #3fb950; top: 30px; left: 30px; z-index: 2; }
.blue   { background: #58a6ff; top: 60px; left: 60px; z-index: 3; }

index.html — the HTML structure (what the CSS targets)

<div style="position: relative; height: 200px;">
  <div class="box red">red (z=1)</div>
  <div class="box green">green (z=2)</div>
  <div class="box blue">blue (z=3)</div>
</div>

Live preview updates as you type

🧠 How it works

z-index only works on positioned elements (position: relative/absolute/fixed/sticky). On static elements, z-index is ignored. Higher z-index = closer to the user (on top). Default z-index is 0 (or 'auto'). Modal dialogs typically use z-index: 1000+ to appear above everything. Inside a stacking context, only siblings compete — a child of a low-z-index parent cannot escape above a high-z-index sibling of the parent.

✏️ Try these changes

Change .red z-index: 1 to z-index: 10
→ red jumps to the top
Change .blue z-index: 3 to z-index: 0
→ blue drops to the bottom
Change .green z-index: 2 to z-index: -1
→ green goes BEHIND the page background (becomes invisible)

← Previous lab

transition — smooth animations

Next lab →

border-radius — round the corners