Z-index is very clever. It can help you choose which parts of your layout goes on the top or on the bottom, in a stacking manner.
Click here, for example.
If you look at the codes, the image class "x" is set to z-index 1. Since you didn't specify a z-index for the words, it's set to default, which is z-index 0. Therefore, the bulb goes on top of the words because its z-index is higher than the words. However, if you change the bulb's z-index to -1, it will go under the text since it's lower than the default z-index.
Yeah, too much z-index. Hopefully, I made at least a little bit of sense.