Using CSS z-index property

CSSWeb DevelopmentFront End Technology

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>
raja
Published on 18-Apr-2018 07:08:56
Advertisements