Posicionar una capa sobre otra en CSS

Enviado por admin en Mié, 11/14/2012 - 08:59

En este apunte veremos una forma de posicionar una capa CSS sobre otra. En primer lugar, mostraré los tres elementos que interactúan en el ejemplo:

1.- Capa "container" que mantendrá dentro de sí a las otras (color gris).
2.- "capa-roja".
3.- "capa-verde".




El código HTML para las capas es:

<DIV id="contenedor">
<DIV id="capa_roja"></DIV>
<DIV id="capa_verde"></DIV>
</DIV>

Mientras que el código CSS es:

		#contenedor {
			background-color: #f0f0f0;
			border:1px solid gray;
			width:400px;
			height: 400px;
		}
		
		#capa_roja {
			border:2px solid #fa2727;
			background-color: #fa8383;
			width:150px;
			height: 150px;
		}
		
		#capa_verde {
			border:2px solid #59d216;
			background-color: #b8d2aa;
			width:150px;
			height: 150px;
		}

Luego para posicionar una capa sobre otra debemos tener en consideración lo siguiente:

1.- La capa container tendrá una nueva propiedad position: absolute.
2.- Las dos capas interiores tendrán una nueva propiedad position: relative.
3.- Además de la propiedad position, se agregará a las capas internas la propiedad z-index que indica el orden en que se apilarán: la capa con un mayor z-index es la que quedará sobre la otra.
4.- Por último, asignaremos a las capas interiores las propiedades bottom y right para darles una posición determinada dentro del container.

		#contenedor {
			background-color: #f0f0f0;
			border:1px solid gray;
			width:400px;
			height: 400px;
			position:relative;
		}

		#capa_roja {
			border:2px solid #fa2727;
			background-color: #fa8383;
			width:150px;
			height: 150px;
			position:absolute;
			z-index: 15;
			bottom:25px;
			right:25px;
		}
		
		#capa_verde {
			border:2px solid #59d216;
			background-color: #b8d2aa;
			width:150px;
			height: 150px;
			
			position:absolute;
			z-index: 10;
			bottom:35px;
			right:35px;
		}

Con lo anterior la nueva disposición de las capas es la siguiente:




Tags: 
CSS
Herramientas tecnológicas: 
CSS