This is, according to some, one of the most misunderstood concepts in CSS. For the life of me though I can’t see why that is!
The general concept of z-index is fairly straightforward. You have X and Y, controlling the width and height. The Z-axis then is the depth. That is to say the order of elements in a stack.
Put simply, this of Photoshop and how you use layers. You put layers on top of each or under each other. These can have different effects, but the gist is the same.
In CSS, z-index says whether an object is on top or below an element. For example, if you had a box and an image on top of that box, it would be above the image. Therefore, it would have a higher z-index. It would be higher in the stack.
Z-indexed elements should start at around 1,000 for the first object and then 2,000 onwards. Incrementing by 1,000 can help avoid some issues with the construct of the property. Which is to say that by default, it displays as 1 and doesn’t always translate properly — or like you’d expect.