Creación y posicionamiento de capas en HTML5 y CSS3
En este manual vamos a aprender a manejar capas con HTML5 y CSS3 para poder distribuir nuestro contenido en la página web y darle formato.
Insertar capas
Lo primero que tendremos que hacer es crear la capa, para ello utilizamos la etiqueta <div> ... </div>. Y dentro introduciremos el contenido deseado. Un texto por ejemplo, y quedaría:
<div>Texto de ejemplo</div>
Posicionar capas (div)
Una vez que la hemos creado y hemos introducido contenido, vamos a posicionarla. Para ello tenemos la propiedad de CSS3 (para saber más acerca de vincular y utilizar una hoja de estilos CSS, descarga nuestra Guía definitiva de HTML5 y CSS3) position. Puede tener como atributos:
- absolute: la capa aparecerá en la posición que nosotros le indiquemos, sin tener en cuenta el flujo del resto de elementos de la página. Para posicionarla tenemos los siguientes parámetros:
- top: distancia entre la parte superior de la página y la parte superior de la capa.
- left: distancia entre la parte izquierda de la página y la parte izquierda de la capa.
- right: distancia entre la parte derecha de la página y la parte izquierda de la capa.
- bottom: distancia entre la parte inferior de la página y la parte inferior de la capa.
div {
position: absolute;
top: 50px;
left: 40px;
}
- relative: la capa aparecerá de manera relativa a la posición del elemento anterior en el código fuente de nuestra web. Esto quiere decir que se separará la distancia que nosotros establezcamos mediante las propiedades top, left, right y bottom, del elemento declarado antes en el código fuente.
div {
position: relative;
top: 240px;
}
- float: posicionamiento flotante. Colocamos el elemento y el resto de elementos fluyen a su alrededor. Podemos colocarlo a la izquierda de la pantalla, a la derecha, arriba o abajo. Muy utilizado para colocar una imagen a la parte izquierda de la pantalla, por ejemplo, y introducir un texto que fluirá a su derecha.
div {
float: left;
}
- fixed: sirve para fijar un elemento a la pantalla, de modo que si el usuario hace scroll el elemento no se mueva ni desaparezca al bajar la pantalla por ejemplo. En caso de que tengamos un elemento con position: fixed en la parte superior izquierda de la pantalla, SIEMPRE estará en la parte superior izquierda, aunque el usuario se desplace de forma vertical o horizontal por la página.
div {
position: fixed;
top: 0px;
left 0px;
}
SI QUIERES VER EJEMPLOS DE CREACIÓN Y POSICIONAMIENTO DE CAPAS EN HTML5 Y CSS3, Y ESTE TEMA DESARROLLADO, HAZ CLIC AQUÍ
