English 中文(简体)
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

Selected Reading

CSS - Layers
  • 时间：2024-12-22

CSS - Layers

Previous Page Next Page  

CSS gives you opportunity to create layers of various spanisions. 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.

<html>
   <head>
   </head>

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

It will produce the following result −