The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at the bottom.
Example
You can try to run the following code to implement the z-index property −
<html> <head> </head> <body> <div style = "background-color:blue; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2"> </div> <div style = "background-color:gray; width:300px; height:100px; position:relative; top:-60px; left:35px; z-index:1;"> </div> <div style = "background-color:yellow; width:300px; height:100px; position:relative; top:-220px; left:120px; z-index:3;"> </div> </body> </html>