miguelcast.

Entendiendo la propiedad position de css

CSS
.box {
  position: relative;
}

Cuando empecé a usar esta propiedad no sabía bien como era su funcionamiento, solo lo usaba y me servía para lo que necesitaba. Luego de entender su funcionamiento comencé a crear CSS más ordenado, mantenible y con mejores prácticas.

Normal Document Flow

Para entender mejor la propiedad position de css tenemos que empezar por el document flow. Este hace referencia a la forma como se van acomodando los elementos html en la página web, siempre comienza desde la parte superior izquierda de la página. En el siguiente ejemplo vemos como los elementos en línea se acomodan uno al lado de otro y cuando no tienen más espacio horizontal hacen un salto de línea. Los elementos en bloque se acomodan uno debajo del otro de arriba hacia abajo.

Alterando el flujo con position

Los diferentes valores de la propiedad position nos ayudan a cambiar los elementos de su flujo normal y moverlos a una posición diferente, dejarlos en un lugar estático en la pantalla, poner elementos unos sobre otros y muchas cosas más.

Position static

CSS
.box {
  position: static;
}

El valor por default de la propiedad position es el valor static por eso normalmente no la usamos en nuestro código CSS, los elementos html traen este valor static por default lo que hace es que se vayan agregando en el normal document flow como lo explicamos en la sección anterior.

Position fixed

CSS
.box {
  position: fixed;
}

Con el valor fixed un elemento html es removido del document flow y se queda flotando en una posición dada en la pantalla, es decir, este elemento siempre será visible en la misma posición sin ser cambiado por el scroll. Podemos usar las propiedades left, right, top, bottom y z-index para cambiar la posición del elemento en la pantalla. Si no se asignan unas coordenadas al elemento, este quedará fijo justo en la posición del document flow donde se creó sin afectar el flujo de los otros elementos.

Position relative

CSS
.box {
  position: relative;
}

Con el valor relative el elemento sigue en el normal document flow como lo hace static, pero con la diferencia que ya lo podemos mover o cambiar de posición con las propiedades left, right, top y bottom y traer al frente o atrás con z-index todo esto contra la posición actual del elemento.

En el ejemplo anterior vemos como al aplicar top y left a un elemento con position static este no es afectado por estas propiedades, mientras que al elemento con position en valor relative si es afectado y cambia su flujo en el documento, este elemento es alterado teniendo como referencia su posición en el document flow y aunque es ubicado con otras coordenadas el espacio que ocupa en el flujo sigue estando presente.

Position absolute

CSS
.box {
  position: absolute;
}

Con el valor absolute a diferencia con el relative este deja de ocupar un espacio en el document flow, es decir, el elemento es removido del flujo. Al igual que un elemento con position en relative este se puede cambiar de ubicación con las propiedades left, right, top y bottom y traer al frente o atrás con z-index.

En el ejemplo anterior vemos que los elementos absolutos toman su ubicación dependiendo del tipo de position que tenga el elemento padre, es decir, si el padre de un elemento absoluto es estático, entonces toma como referencia el elemento <html> o al elemento relativo más próximo para posicionarse con las propiedades top, right, bottom y left, mientras que si el padre es de tipo relativo toma como referencia de su ubicación este elemento y lo podemos empezar a mover dentro de este.

El uso inadecuado o excesivo de elementos absolutos puede traer problemas si quieres una web flexible, ya que estos no afectan ni son afectados por otros elementos.

Position sticky

Llegamos a la parte COOL de position con el valor de sticky, este nos permite que un elemento se comporte inicialmente como un elemento con position relative y cuando este elemento es interceptado al hacer scroll se comporta como un elemento fixed hasta que el elemento padre salga de pantalla. Es mucho más fácil hacerlo que explicarlo, vamos a ver el siguiente ejemplo:

Referencias