CSS - Layers

Advertisements

Previous Page
Next Page  

CSS gives you opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.

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 bottom.

A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

Live Demo 
<html>
   <head>
   </head>

   <body>
      <div style = "background-color:red; 
         width:300px; 
         height:100px; 
         position:relative; 
         top:10px; 
         left:80px; 
         z-index:2">
      </div>
      
      <div style = "background-color:yellow; 
         width:300px; 
         height:100px; 
         position:relative; 
         top:-60px; 
         left:35px; 
         z-index:1;">
      </div>
      
      <div style = "background-color:green; 
         width:300px; 
         height:100px; 
         position:relative; 
         top:-220px; 
         left:120px; 
         z-index:3;">
      </div>
   </body>
</html>

It will produce the following result −

Advertisements