In simple words, the higher a z-index value is, the element will be on top of the others. A z-index can be negative which tells the browser to put it lower than other elements on the page.
How to Use:
Use z-index with any element you want to position. You need to have the position attribute set, usually to position:absolute; But the specification says that z-index will work with relatively positioned elements as well. Below are standard values set by me -
• 100 for top-most element
• 0 for middle element
• -100 for bottom element
That way, if we decide we need additional elements stacked in other places, we can still stack them. We can also give two elements the same z-index value. If these elements are stacked, they will display in the order they are written in the HTML, with the last element on top.