The z-index property specifies the stack order of an element. In other words, when there is an overlap between two elements, the z-index value determines which one shows up on top. The element with a larger z-index value will appear on top.
For example, say we define two blocks with the following CSS code:
The following HTML code,
renders the following:
As we can see, the pink block, with a z-index value of 2, lies on top of the red block, which has a z-index value of 1.