CssHow-ToBeginner · 3 min read

How z-index Works in CSS: Layering Elements Explained

The z-index property in CSS controls the stacking order of positioned elements along the z-axis (front to back). Elements with higher z-index values appear in front of those with lower values, but it only works on elements with a position other than static.

📐

Syntax

The z-index property accepts an integer value that sets the stack level of an element. It only works on elements with a position value of relative, absolute, fixed, or sticky.

z-index: auto; - Default stacking order based on document flow.
z-index: integer; - Positive or negative number to set stack level.

css

/* Syntax example */
.element {
  position: relative; /* required for z-index to work */
  z-index: 10; /* stack level */
}

💻

Example

This example shows two overlapping boxes. The blue box has a higher z-index and appears on top of the red box.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>z-index Example</title>
<style>
  .box {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50px;
    left: 50px;
    opacity: 0.8;
  }
  .red {
    background-color: red;
    z-index: 1;
  }
  .blue {
    background-color: blue;
    top: 100px;
    left: 100px;
    z-index: 5;
  }
</style>
</head>
<body>
  <div class="box red"></div>
  <div class="box blue"></div>
</body>
</html>

Output

A red square partially overlapped by a blue square on the bottom right, with the blue square clearly on top.

⚠️

Common Pitfalls

Many beginners forget that z-index only works on positioned elements. Without setting position to relative, absolute, fixed, or sticky, z-index has no effect.

Also, stacking contexts can be tricky: a child element's z-index is relative to its parent's stacking context, so a high z-index inside a low stacking context won't appear above elements outside it.

css

/* Wrong: z-index ignored because position is static */
.element {
  z-index: 10;
  /* position is missing or static by default */
}

/* Right: position set to relative */
.element {
  position: relative;
  z-index: 10;
}

📊

Quick Reference

Property	Description	Notes
z-index	Sets stack order of positioned elements	Only works if position is not static
position	Defines element positioning	Must be relative, absolute, fixed, or sticky for z-index to work
Stacking Context	Groups elements for stacking	Created by position + z-index or other CSS properties
z-index: auto	Default stacking order	Respects document order
Negative z-index	Places element behind others	Can hide elements if too low

✅

Key Takeaways

z-index controls which positioned element appears on top by setting stack order.

It only works on elements with position set to relative, absolute, fixed, or sticky.

Higher z-index values appear in front of lower ones within the same stacking context.

Stacking contexts limit how z-index values compare across different element groups.

Always check element positioning if z-index seems to have no effect.