CSS - Calques

CSS vous donne la possibilité de créer des couches de différentes divisions. Les couches CSS font référence à l'application de la propriété z-index à des éléments qui se chevauchent.

La propriété z-index est utilisée avec la propriété position pour créer un effet de calques. Vous pouvez spécifier quel élément doit venir en haut et quel élément doit venir en bas.

Une propriété z-index peut vous aider à créer des présentations de page Web plus complexes. Voici l'exemple qui montre comment créer des couches en CSS.

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

Il produira le résultat suivant -