Las posiciones y el float en detalle

Para ver en youtube haz clic aquí

(No olvides suscribirte)

Las posiciones

   Sin CSS los elementos se posicionan de acuerdo al flujo del html, que no es mas que el orden en el cual aparecen en nuestro código. Con CSS tenemos varias opciones para cambiar esto, pero de forma intuitiva no es tan fácil saber la diferencia entre cada uno.

1. Static: La opción por defecto no hay que especificarla, los elementos se ubican de acuerdo al flujo HTML, y esto no se puede cambiar, propiedades como left o top son ignoradas.
2. Relative: Relativo a si mismo, el elemento se va a ubicar de acuerdo al flujo HTML y se va a respetar el espacio ocupado
3. Absolute: Los elementos quedan fuera del flujo HTML, el espacio ya no es ocupado
4. Fixed: Los elementos se ubican de acuerdo al "viewport"

  Para un mejor entendimiento de todo esto, te recomiendo ver el video que acompaña a esta entrada

El Float

  El float no es una posición como tal, pero si nos permite posicionar los elementos, la confusión con esta propiedad proviene del hecho de que, aplica un comportamiento, no solo al elemento como tal, si no a todos los elementos que le sigan. Puede recibir, 4 valores, pero los mas importantes son dos, rigth y left, que en español significa derecha e izquierda respectivamente, cada uno hace que el elemento se ubique lo mas hacia el lado como sea posible y luego todos los elementos siguientes se ubican alrededor del lado opuesto. Para una mejor explicación te recomiendo ver el video que acompaña a esta entrada, a partir del minuto 13:22 que es donde comienza el apartado sobre el float