CSS Z-index

Imagine stack of papers on your desk. Each paper represents a box on your webpage. By default, the paper you place last sits on top of the others. If you want to pull an older paper to the top, you change its priority. CSS z-index is that priority order. It controls the vertical stacking layer of overlapping elements along the virtual Z-axis (pointing toward or away from your screen). By assigning z-index values, you can control which cards, sidebars, alerts, or popup modals sit on top, and which ones stay layered in the background.

In this page:

The Virtual Z-Axis Stack
Requires Positioned Elements
Understanding Stacking Contexts
Standardizing Stacking Order Guides
Implicit Stacking with opacity and transform

Syntax

css

selector {
  position: relative;
  z-index: integer;
}

The Virtual Z-Axis Stack

Webpages are rendered in three dimensions. The X-axis handles horizontal layout, the Y-axis handles vertical content flow, and the Z-axis handles stacking depth. The z-index property determines where positioned elements sit along this virtual stacking layer.

Note:

Use z-index to manage overlapping cards, floating alerts, and layout blocks cleanly.
Accepted values:
integer — any whole number, positive or negative, e.g. 10
auto — uses the parent's stacking order (default)
Only works on positioned elements or flex and grid items
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Warning: Z-index values can be positive or negative, but negative values can push elements behind background container backgrounds, making them unclickable.

Example: The Virtual Z-Axis Stack

css

<style>
.wrapper {
  position: relative;
  min-height: 100px;
}
.back {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 140px;
  height: 80px;
  background: gray;
  color: white;
  z-index: 1;
}
.front {
  position: absolute;
  top: 30px;
  left: 40px;
  width: 140px;
  height: 80px;
  background: tomato;
  color: white;
  z-index: 2;
}
</style>
<div class="wrapper">
  <div class="back">Behind on the Z-axis</div>
  <div class="front">In front on the Z-axis</div>
</div>

Requires Positioned Elements

A common point of confusion is why a z-index property is not working. Z-index will only work on positioned elements (elements with a position of relative, absolute, fixed, or sticky). It is ignored on statically positioned elements.

Note:

If a z-index rule is not working, make sure the element has a position other than static.
Accepted values:
auto — follows the order in the document (initial value)
integer — e.g. 1, 10, 999
negative integer — behind siblings
0 — creates a stacking context on positioned elements
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Warning: Adding position: relative to an element just to enable z-index is safe, but be careful not to introduce accidental offsets.

Example: Requires Positioned Elements

css

<style>
.ignored {
  z-index: 999;
  background: gray;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}
.works {
  position: relative;
  z-index: 999;
  background: crimson;
  color: white;
  padding: 10px;
}
</style>
<div class="ignored">z-index ignored (position: static)</div>
<div class="works">z-index works (position: relative)</div>

Understanding Stacking Contexts

Z-index layers do not operate globally. They are limited within parent elements that form a 'Stacking Context'. An element with a z-index of 999 nested inside a parent with a z-index of 1 can still sit behind an element with a z-index of 2 on the main page structure.

Note: Think of stacking contexts like folders: everything inside folder 1 stays behind folder 2, regardless of internal index numbers.

Warning: Creating nested stacking contexts can make debugging overlapping elements in complex layouts difficult.

Example: Understanding Stacking Contexts

css

<style>
.parent {
  position: relative;
  z-index: 1;
  background: #eef;
  padding: 10px;
  min-height: 100px;
}
.child {
  position: relative;
  z-index: 999;
  top: 20px;
  background: crimson;
  color: white;
  padding: 8px;
  display: inline-block;
}
.sibling {
  position: relative;
  z-index: 2;
  top: -20px;
  left: 20px;
  background: seagreen;
  color: white;
  padding: 8px;
  display: inline-block;
}
</style>
<div class="parent">
  <div class="child">z-index 999, but trapped inside the parent's stacking context</div>
</div>
<div class="sibling">z-index 2, still stacks above the parent above</div>

Standardizing Stacking Order Guides

As websites grow, managing z-index values can become messy. Creating a standardized z-index reference guide (like using increments of 10 or 100) helps prevent styling conflicts and keeps layouts clean.

Note: Organize your z-index values into structured layers (e.g., header: 100, modal: 200) to keep your stylesheet rules clean.

Warning: Avoid using arbitrary z-index values like 99999, as they can cause rendering bugs and conflicts.

Example: Standardizing Stacking Order Guides

css

<style>
.header {
  position: relative;
  z-index: 100;
  background: steelblue;
  color: white;
  padding: 10px;
}
.modal {
  position: relative;
  z-index: 200;
  top: -20px;
  left: 20px;
  background: crimson;
  color: white;
  padding: 10px;
}
</style>
<div class="header">Layer 100</div>
<div class="modal">Layer 200</div>

Implicit Stacking with opacity and transform

Z-index coordinates can sometimes trigger without explicit z-index rules. Properties like opacity (less than 1.0), transform, or filter automatically create new stacking contexts natively, which can affect element layering.

Note: If elements are stacking unexpectedly, check if properties like transform are creating new stacking contexts.

Warning: Applying opacity to a container can push all its nested elements behind adjacent content layers on the page.

Example: Implicit Stacking with opacity and transform

css

<style>
.box {
  opacity: 0.99;
  transform: translateZ(0);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Creates a new stacking context without an explicit z-index</div>

Live Example

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Position Offsets Next Lesson → CSS Overflow