Las hojas de estilo también sirven para definir la posición de los elementos en la página.
Si no modificamos el posicionamiento, los elementos siguen el flujo normal: ocupan todo el espacio que necesitan y se acumulan uno detrás del otro. Es decir, la página se contruye de manera vertical y según el orden en que aparecen en el código HTML.
Al posicionar los elementos es necesario tener muy en cuenta la idea del flujo de la página: si posicionamos un elemento puede afectar a los demás que sigan el flujo normal y que obtengamos resultados no deseados.
También hay que tener en cuenta si trabajamos la maquetación de páginas dinámicas, ya que tendremos que prever las posibles distintas longitudes de los elementos.
La propiedad position es la que, a priori, se utiliza para posicionar los elementos de la página. Hay 4 valores posibles.
position: static
El posicionamiento estático es el que rige la página por defecto, el que define el flujo normal de la página comentado anteriormente.
Por este motivo, no es necesario indicarlo ya que todos los elementos de entrada están posicionados de forma estática.
El posicionamiento absoluto nos permite colocar un elemento indicándole las "coordenadas".
Es una manera muy práctica de posicionar pero bastante agresiva, ya que elimina al elemento posicionado absolutamente del flujo normal de la página, es decir, los elementos no posicionados que le sigan pueden quedar superpuestos o crear efectos extraños al sí seguir estos la lógica normal de colocación.
Se puede posicionar de manera absoluta en relación a la página o en relación al elemento contenedor. En este último caso es necesario que el contenedor esté posicionado. Si por defecto no lo está, podemos utilizar de "comodín" position:relative (dado que no le indicaremos ningún valor más no modificará la posición del elemento).
Podemos indicar las coordenadas top, right, bottom o left del siguiente modo:
#bloque {
position: absolute;
top: 15px;
left: 20px;
}
position: fixed
El posicionamiento fijo funciona del mismo modo que el absoluto. La única diferencia es que los elementos posicionados de forma fija no varían su posición al hacer scroll en la página, por lo tanto siempre están visibles e inmoviles.
#bloque {
position: fixed;
top: 15px;
left: 20px;
}
position: relative
El posicionamiento relativo posiciona los elementos en relación al lugar que ocuparían siguiendo el flujo normal. Por lo tanto, permite recolocar/corregir la posición de un elemento sin romper el flujo de la página, ya que en este caso sí que está ocupando el espacio que necesita en relación a lo demás.
Podemos indicar la variación de posición respecto a top, right, bottom o left, con valores positivos o negativos.
#bloque {
position: relative;
top: 15px;
left: 20px;
}
Al posicionar, podemos superponer varios elementos. Por defecto, se acumulan por el orden en que aparecen en el código, pero podemos modificar este orden.
El funcionamiento en este caso lo podemos equiparar a las capas: a cada elemento le podemos asignar un valor para ordenarlos a través de la propiedad z-index. Las capas con valores inferiores estarán por debajo de las que tengan valores más altos.
La propiedad z-index sólo afecta a elementos posicionados.
#bloque {
position: relative;
top: 15px;
left: 20px;
z-index: 4;
}
La propiedad float nos permite colocar un elemento a la derecha o izquierda dentro de su elemento contendor de forma que los demás elementos se adaptan (dentro de lo posible) al espacio que deja libre.
Es una manera poco agresiva de posicionar, ya que se mantiene una cierta idea de flujo: a pesar de modificar la posición de un elemento el resto de recoloca siguiendo la lógica del flujo.
De este modo, podemos evitar los conflictos que, por ejemplo, puede generar el posicionamiento absoluto en páginas dinámicas en las que podemos encontrar longitudes variables de los elementos.
Es importante definir el ancho en los elementos de bloque, ya que por defecto ocupan todo el ancho disponible (no apreciaríamos el efecto, ya que no aceptarían ningún elemento a izquierda o derecha)
Podemos flotar los elementos a la izquierda o a la derecha (left o right):
#bloque {
width: 300px;
float: left
}
En ocasiones nos puede interesar tener un elemento flotado al que se adapten parte del resto de elementos y "cortar"en un punto determinado para que un elemento empieze en una nueva línea, es decir, no entre en el juego de adaptarse al bloque flotado.
Para ello, utilizaremos la propiedad clear, a través de la que definimos a qué lado un elemento no puede tener otros flotados. Podemos decidir que sea a la izquierda, derecha o ambos (este último es el más utilizado) (left, right, both)
#bloque {
clear: both;
}
Uno de los problemas más habituales al trabajar con floats es la dificultad para conseguir que el contenedor se adapte la altura del elemento flotado. Esto es especialmente evidente si el contenedor tiene un color de fondo: si tenemos un elemento flotado en él es muy probable que el color de fondo no ocupe toda la altura.
Para solucionar este (y otros) problema podemos utilizar un hack, colocando la clase clearfix al contenedor:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}.clearfix {
display: inline-block;
}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearboth {display: block;}
/* End hide from IE-mac */