CSS z-index Property

Definition and Usage

The z-index property sets the stack level of a box along the z-axis. When positioned boxes overlap, a higher value paints in front of a lower one.

It applies to elements with position other than static, and to flex or grid items. The initial value is auto. It is not inherited. An integer value also creates a local stacking context.

CSS Syntax

Integers may be positive, 0, or negative. Decimals are not valid.

Property Values

How to Use z-index

Position the boxes, then set clear stack levels.

1. Give overlapping boxes a non-static position (for example relative or absolute).
2. Set z-index integers so the front box has the higher value.
3. Keep a small scale (for example 1, 2, 3) instead of huge numbers.
4. Remember stacking contexts — a child cannot escape a parent context with a huge z-index.

Live Preview

Two positioned boxes overlap. Change the teal box’s z-index and watch which one is on top.

CSS Examples

Each snippet focuses on z-index. Use Try It Yourself for a live editor.

<style>
  .box {
    position: absolute;
  }

  .back {
    z-index: 1;
  }

  .front {
    z-index: 2;
  }
</style>

<div class="stage">
  <div class="box back">1</div>
  <div class="box front">2</div>
</div>

<style>
  .box {
    position: absolute;
  }

  .under {
    z-index: -1;
  }

  .over {
    z-index: 0;
  }
</style>

<div class="stage">
  <div class="box under">-1</div>
  <div class="box over">0</div>
</div>

<style>
  .box {
    position: absolute;
    z-index: auto;
  }
</style>

<div class="stage">
  <div class="box first">A</div>
  <div class="box second">B</div>
</div>

Key Takeaways