Demon Tech Roadmap

CSS

CSS Z-Index

CSS z-index controls the vertical stacking order of elements.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS layers elements on top of each other when they overlap. The `z-index` property tells the browser which element sits in front. Higher numbers stay on top, while negative numbers sink to the back.

Syntax

1/* z-index syntax */
2div {
3  z-index: 10;
4}

Example

1/* this puts an image behind text */
2img {
3  position: absolute;
4  left: 0;
5  top: 0;
6  z-index: -1;
7}

Key Points

Elements with a higher `z-index` sit in front.
Elements with a lower `z-index` hide behind.
The property only works on positioned elements.
It accepts positive and negative whole numbers.

Up Next

Continue your journey with the next topic.

Go to CSS Overflow ❯