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>

karthikeya Boyini
karthikeya Boyini

I love programming (: That's all I know

Updated on: 04-Mar-2020

162 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements