Cómo aprender CSS position con ejemplos

Si trabajas en desarrollo frontend, saber cómo posicionar elementos con CSS es un conocimiento fundamental en tu día a día. CSS cuenta con cinco tipos de position. En este artículo voy a compartirte un ejemplo sencillo y práctico con cada uno de ellos.

Todos los ejemplos de position usan la siguiente estructura HTML base:

<main>
	<div class="card card-1">
		card 1
	</div>
	<div class="card card-2">
		card-2
	</div>
	<div class="card card-3">
		card-3
	</div>
</main>

static

El valor static es el comportamiento por defecto de los elementos en el flujo del documento. Cada elemento se ubica siguiendo el orden natural de la página.

Ver ejemplo en JSFiddle

relative

El elemento se puede mover respecto a su posición original usando las propiedades top, bottom, left y right.

Ejemplo: movemos la tarjeta actual 50px desde la izquierda. El elemento toma como referencia su ubicación original en el flujo.

Ver ejemplo en JSFiddle

absolute

El elemento sale del flujo normal del documento sin romper la posición de los demás elementos. Puedes moverlo a cualquier lugar porque, por defecto, toma como referencia el elemento body.

Ejemplo: el contenedor main tiene un tamaño de 250px y .card-3 con posición absoluta y top: 0 se sale de su elemento padre.

Ver ejemplo en JSFiddle

Si quieres moverlo tomando como referencia su contenedor padre, debes asignarle position: relative o position: absolute al padre.

Ver ejemplo en JSFiddle

Ahora .card-3 mantiene su posición respecto al padre, pero queda encima de .card-1. ¿Cómo podemos pasar .card-1 al frente?

La propiedad z-index nos ayuda a mover elementos sobre otros. Solo necesitamos asignarle un valor mayor para traerlo al frente.

Ver ejemplo en JSFiddle

fixed

Un elemento con position: fixed también sale del flujo normal, pero toma como referencia la ventana del navegador (el viewport).

Ejemplo: si necesitas un mensaje fijo en la parte superior o una ventana modal sin importar si el usuario hace scroll en la página, este es el caso de uso ideal.

Primero aumentamos la altura del body a 150vh y asignamos position: fixed al contenedor main con top: 100px. Aunque el usuario haga scroll, el contenedor se mantendrá fijo en su lugar.

Ver ejemplo en JSFiddle

sticky

Un elemento con position: sticky mantiene su posición relativa al scroll del usuario.

Ejemplo: la tarjeta con posición sticky dentro de main mantendrá su posición fija mientras su contenedor padre siga visible en la pantalla.

Ver ejemplo en JSFiddle

Conclusión

Este es un recorrido rápido por los tipos de position en CSS. Espero que estos ejemplos prácticos te ayuden a entender con claridad cómo funciona cada uno.

Foto de Mitchell Luo en Unsplash