Posicionamiento de las cajas
Existen tres opciones de posicionamiento de las cajas dentro del <body>.
relative:
Este es el tipo de posicionamiento por defecto.
Las cajas o <divs> se posicionan siempre en relación al resto de <divs>. Si se mueven o se modifica el tamaño de las cajas anteriores, las cajas que hayan debajo se moverán.
Con este posicionamiento NO es posible colocar una caja encima de otra.
absolute:
Al indicar un posicionamiento absoluto es posible colocar una caja en una coordenada concreta sin importar el posicionamiento del resto de cajas.
Es posible que una caja esté encima de otra.
Un ejemplo es el caso de la chincheta lila (que hay en la parte superior de esta misma página), que se coloca por encima de otras cajas, pero que al mover el scroll de la página se mueve como el resto de elementos.
fixed:
Tiene las mismas características que el posicionamiento absoluto, pero con la diferencia de que al mover el scroll del navegador la caja con posicionamiento fijo NO se moverá del lugar donde ha sido ubicada.
Un ejemplo es la bandera (ubicada en la parte superior derecha de la pantalla), que está por encima del resto de elementos y se queda fija en la esquina superior derecha. Así, aunque movamos la barra de scroll o hagamos más pequeña la ventana del navegador no se mueve de esa posición.
Otro ejemplo es el <footer> inferior de esta página, que está colocado fijo en la parte inferior de la ventana del navegador.
Se utilizaría únicamente una de los tres valores que siguen:
#nombre_del_div{
position:relative;
position:absolute;
position:fixed;
}
Al definir el posicionamiento como absolute o como fixed es necesario indicar la posición o coordenada exacta en la que se desea ubicar la caja (o <div>).
Para ello podemos utilizar los siguientes valores:
- left: Especifica la coordenada horizontal, empezando a contar desde el extremo izquierdo.
- right: Especifica la coordenada horizontal, empezando a contar desde el extremo derecho.
- top: Especifica la coordenada vertical, empezando a contar desde el extremo superior.
- bottom: Especifica la coordenada vertical, empezando a contar desde el extremo inferior.
Por ejemplo, en el siguiente código se especifica un posicionamiento fijo del <footer> (como es el caso de este html) en el que éste siempre estará colocado en la parte inferior de la pantalla y en el extremo izquierdo. Así, aunque hagamos más alto o más bajo la ventana del navegador (puedes intentarlo) o exista más o menos contenido, el <footer> siempre estará fijo en la parte inferior de la misma.
footer{
position:fixed;
bottom:0px;
left:0px;
}
Lo realmente importante
Hay una cosa realmente importante para evitar problemas de última hora.
Si ubicamos un <div> en una posición absoluta de la pantalla sin indicar nada más, será muy probable que cuando cambiemos la anchura del navegador o -todavía más grave- según tenga el usuario una anchura u otra del navegador, el <div> posicionado con valor absolute esté en un lugar muy diferente.
Para ver un ejemplo real, sube al principio de esta página, redimensiona la ventana del navegador y verás como la chincheta lila se mueve horizontalmente mientras modificas el ancho del navegador (Subir).
Para evitar este grave problema debemos introducir el <div> con posición absoluta dentro de otro <div> (contenedor) con posición relativa.
#contenedor{
position:relative;
}
#div_absoluto{
position:absolute;
}
