Hoy os presento un nuevo recurso que es muy util cuando nos encontramos maquetando una pagina web y tenemos un diseño con contenidos superpuestos, como pueden ser imagenes que a su vez contienen superpuestas otras imagenes y queremos separar el contenido sin que unos esten contenidos en otros, lo que se llama “superponer capas” o “posicionar unas capas sobre otras”, en el codigo vais a poder ver que es sencillo pero que todo se realiza por estilos CSS.
Lo primero es generar los contenidos, que en este caso vamos a hacerlos con div’s que contengan un texto, en este caso vamos a trabajar con 4 contenedores:
<div>capa Numero 1</div> <div>Capa numero 2</div> <div >Capa numero 3<br/>Segunda linea capa numero 3</div> <div >Capa numero 4</div> |
Estos contenedores los vamos a posicionarlos superponiendo unos a otros, para ello le añadimos los estilos necesarios, yo en este caso les he añadido un color de fondo, asi es mas sencillo ver lo que ocupa cada uno.
<div style=" background:blue;position:absolute;width:100px;z-index:1">capa Numero 1</div> <div style="background:yellow;position:absolute;margin-top:100px;margin-left:50px;width:200px;z-index:2; text-align:right">Capa numero 2</div> <div style="background:green;position:absolute;margin-top:150px;margin-left:150px;width:200px;z-index:3; text-align:center">Capa numero 3<br />Segunda linea capa numero 3</div> <div style="background:pink;position:absolute;margin-top:200px;margin-left:250px;width:100px;z-index:4">Capa numero 4</div> |
como vereis los estilos necesarios son “position:absolute” y “z-index:4” , los demas son estilos para posicionarlo vertical y horizontalmente.
Podeis ver el ejemplo compreto pinchando aquí.
Espero que os sirva de ayuda y os haya gustado el recurso.
Un Saludo.