Using CSS z-index property

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>
Updated on: 2020-03-04T12:37:34+05:30

185 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements