What is the purpose of the z-index? Explain with the help of an example.

While using css to position html elements they may overlap each other. The z index i used to specify which element overlaps which element. The z-index is a number which can either have a positive or a negative value. By default the z-index value is zero. In case elements have the same z-index number specified then the browser will layer them according to the order in which they appear in the HTML.
For ex.
We have a list of 4 elements each with their defined numbers:
element1 - z-index number 25
element2 - z-index number -34
element3 - z-index number 10
element4 - z-index number not defined
In this case the order of their stack would be:
element1
element3
element4
element2