Propiedad Position
Además de utilizar la propiedad float para estructurar elementos en CSS, podemos utilizar la propiedad position para lograr mayor precisión al posicionar algunos elementos.
Recordemos que todos los elementos aparecen ubicados en el flujo de la página. A través de la propiedad position, podemos modificar esta posición y romper con estructuras más tradicionales.
Antes de comenzar, veamos los valores que puede adoptar la propiedad position:
- Posición Estática:
- Es la posición por defecto que aplica el navegador a las cajas. Simplemente lo ubica luego del elemento hermano anterior dentro de su contenedor al crear el flujo de la página. Ejemplo
- Posición Relativa:
- Un elemento con posición relativa, se ubicara relativo a su posición natural (posición estática). Ejemplo
- Posición Absoluta:
- Ahora logramos mayor control, la posición absoluta nos permite determinar dónde se ubicará un punto de referencia del elemento en relación con el contenedor más cercano cuya posicion sea relative. Cuando la página sea navegada, el elemento mantendrá su posición. Ejemplo
- Posición Fija:
- Todavía más control. La posición de un elemento fijo, siempre es relativa a la ventana del navegador. Ejemplo
La propiedad position debe ir de la mano con otra propiedad que define cuál será su posición, ayuda a definir el punto de referencia desde dónde ubicar la caja, estas son:
- top
- left
- bottom
- right
El valor de estas propiedades siempre dependerá del valor de la propiedad position.