Generador de la propiedad CSS position

Cambia entre los 5 valores de position en CSS (static, relative, absolute, fixed, sticky) con una interfaz gráfica, observa en tiempo real el efecto de top/right/bottom/left y z-index, y genera el código CSS gratis.

Consejos

Cambia a position: relative y define top/left para desplazar visualmente la Caja B de su posición original; observa que la Caja C (el elemento siguiente) no se mueve en absoluto.
Al cambiar a absolute o fixed, la Caja B se retira por completo del flujo normal, por lo que la Caja C se desplaza para ocupar el espacio que ha dejado libre.
z-index controla el orden de apilamiento cuando los elementos se superponen, pero no tiene ningún efecto en elementos con position: static — cambia el valor de position antes de probar "Definir z-index".
position: sticky solo funciona dentro de un contenedor con desplazamiento. Desplaza el propio recuadro de vista previa para ver cómo el elemento se fija a mitad de camino.
El código CSS generado se puede copiar y pegar directamente en tu propia hoja de estilos; pruébalo en una página real para confirmar que se ve igual.

Preguntas frecuentes

absolute se posiciona respecto a su ancestro posicionado más cercano (el padre más próximo cuyo position no sea static); si no existe ninguno, termina usando el bloque contenedor inicial de la página. fixed, en cambio, siempre se posiciona respecto al viewport del navegador, por lo que permanece en el mismo lugar de la pantalla aunque la página se desplace.

Las causas más habituales son un elemento padre con overflow: hidden u overflow: auto, un padre cuya altura apenas supera la del propio elemento sticky (sin margen para fijarse), o simplemente olvidar definir un desplazamiento como top. Además, el efecto de sticky queda limitado al contenedor padre, así que este debe funcionar realmente como una zona con desplazamiento.

relative desplaza visualmente un elemento respecto a la posición que ocuparía si fuera un elemento normal con position: static, según los valores de top/right/bottom/left que definas. Lo importante es que el espacio que ocupaba originalmente en el diseño se sigue reservando — esa es la gran diferencia con absolute, que retira el elemento del flujo por completo.

z-index solo afecta a elementos que no tengan position: static (es decir, relative, absolute, fixed o sticky). Tampoco se comportará como se espera si un elemento padre crea su propio contexto de apilamiento — por ejemplo usando transform u opacity junto con position — ya que entonces el z-index de los hijos queda limitado a ese contexto.

El truco habitual es añadir position: relative al elemento padre que quieras usar como referencia. Ni siquiera necesitas definir valores de desplazamiento: basta con añadir position: relative para convertirlo en un "elemento posicionado", y cualquier descendiente con absolute se colocará respecto a sus bordes internos.

A propósito — El largo camino hasta estandarizar position: sticky

CSS ha contado con static, relative, absolute y fixed desde sus primeros tiempos, pero crear una cabecera o una barra lateral que se fijara solo después de desplazarse más allá de cierto punto exigía durante mucho tiempo vigilar los eventos de scroll con JavaScript y alternar manualmente hacia position: fixed. No existía forma de expresar ese comportamiento únicamente con CSS.

La idea de position: sticky se propuso ya hacia 2012 en la especificación CSS Positioned Layout Module Level 3, pero resultó difícil de implementar bien. Safari lanzó una primera versión con prefijo de proveedor (-webkit-sticky) alrededor de 2013, Chrome no soportó la palabra clave estándar sticky hasta 2017, y no fue hasta cerca de 2020 cuando todos los navegadores principales, incluido Firefox, ofrecieron un soporte fiable y consistente.

A nivel técnico, el comportamiento de sticky de "fijarse a mitad de desplazamiento" se describe mejor como un híbrido entre relative y fixed: el elemento se comporta como relative en circunstancias normales, y pasa a comportarse como fixed en cuanto el scroll alcanza el desplazamiento que se ha definido. Ese cambio solo se activa dentro del rango de desplazamiento del elemento padre, que es precisamente por qué sticky suele parecer que "no funciona" cuando el overflow o la altura del padre se interponen.

Hoy en día, sticky es una técnica habitual del diseño web: fijar la fila de encabezado de una tabla, mantener visible un índice mientras se desplaza la página, y mucho más. Eliminar la necesidad de escuchar el scroll mediante JavaScript supuso una mejora real tanto en rendimiento como en simplicidad del código.

Ver todas las curiosidades

Generador de la propiedad CSS position

Consejos

Preguntas frecuentes

¿Cuál es la diferencia entre absolute y fixed?

¿Por qué no funciona position: sticky?

¿Respecto a qué se posiciona exactamente position: relative?

¿Por qué z-index no cambia el orden de apilamiento aunque lo defina?

¿Cómo defino el bloque contenedor respecto al cual se posiciona un elemento absolute?

A propósito — El largo camino hasta estandarizar position: sticky