What is z-index in CSS

1 min readFeb 16, 2023

Hi guys! Long time no see. After a long time, I am here again. I hope you are well. Let’s jump to today’s post.

CSS is too tricky. You must know what is under the hood of properties to solve complex layouts or bugs.

One of these weird properties is the z-index.

You use z-index when you want a certain DOM element to be on top of another. Sounds simple, right?

But in stylesheets we see:

z-index: 9999999
z-index: 9999999999999

The reason is we do not have enough knowledge about its mechanism. The secret is behind stacking context. But what is stacking context?

One important thing before diving into the deep is to remember that z-index values are not global.

I found 3 great articles that explain z-index and stacking context.

Written by Amish Shabani