Índice

Superposición de las cajas

La propiedad z-index agrega un eje de profundidad que permite posicionar los elementos los unos por encima o por debajo de los otros.

images/21RI07.png

De este modo, si un elemento tiene la propiedad z-index: 2 aparecerá por delante de otro elemento que tenga la propiedad z-index: 0.

z-index:

un número entero (positivo);

Esta propiedad solo funciona con un posicionamiento absoluto de los elementos.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
<title>Html5</title> 
<meta charset="UTF-8">  
<style type="text/css"> 
.caja1 { position: absolute;  
         left: 20px; top: 20px;  
         width: 80px; height: 40px; 
         padding: 4px; 
         border: 2px solid gray; 
         background-color: rgb(125,165,205); 
         z-index: 1;}  
.caja2 { position: absolute;  
         left: 40px; top: 50px;  
         width: 80px; height: 40px; 
         padding: 4px; 
         border: 2px solid gray; 
         background-color: rgb(215,230,245); 
         z-index: 2;} 
.caja3 { position: absolute;  
         left: 60px; top: 80px;  
         width: 80px; height: 40px; 
         padding: 4px; 
         border: 2px solid gray; 
         background-color: white; 
         z-index: 3;} 
</style> 
</head> 
<body> 
<div class="caja1"> 
z-index 1 
</div> 
<div class="caja2"> 
z-index 2 
</div> 
<div class="caja3"> 
z-index 3 
</div> 
</body> 
</html> ...