CSS oferece a oportunidade de criar camadas de várias divisões. As camadas CSS referem-se à aplicação da propriedade z-index a elementos que se sobrepõem.
A propriedade z-index é usada junto com a propriedade position para criar um efeito de camadas. Você pode especificar qual elemento deve vir na parte superior e qual elemento deve vir na parte inferior.
Uma propriedade z-index pode ajudá-lo a criar layouts de página da web mais complexos. A seguir está o exemplo que mostra como criar camadas em 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>
Isso produzirá o seguinte resultado -