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.

Última actualización: 2026-09-20

Comparar los cinco valores de position

`position` es la propiedad que decide dónde se asienta un elemento, y toma cinco valores: `static`, `relative`, `absolute`, `fixed` y `sticky`. Esta herramienta le permite cambiar entre ellos mientras confirma en el acto cómo se comportan `top`, `right`, `bottom`, `left` y `z-index`, para después generar el CSS.

**Cuando un elemento colocado con `absolute` se va a parar a un lugar inesperado, la causa es casi siempre la misma: se posiciona respecto del ancestro más próximo cuyo `position` no sea `static`.** Si no existe tal ancestro, el elemento recae sobre la página entera. **Olvidar `position: relative` en el padre** explica casi todos los casos. **`sticky` tiene un tropiezo bien conocido propio: un `overflow: hidden` o `overflow: auto` en cualquier punto de la ascendencia impide que se adhiera.** Y como `z-index` queda confinado en una unidad anidada llamada contexto de apilamiento, **un elemento dentro de un contexto situado por debajo de otro no puede alzarse sobre él por grande que sea el valor.**

Cómo se usa

Cambie el valor de position Probar los cinco por turno muestra en qué difiere aquello respecto de lo cual cada uno se posiciona.
Mueva los desplazamientos **Confirme que `top` y sus compañeros no surten efecto alguno mientras el valor sea `static`.**
Cambie z-index Puede ver cómo se altera el orden de apilamiento.
Copie el CSS generado Una vez que la colocación sea la buscada, puede pegarse directamente en su código.

Consejos para aprovecharla mejor

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.

Cuándo resulta útil

Adherir un encabezado a lo alto de la vista

**Con `sticky`, el encabezado permanece en su sitio mientras la página se desplaza.**

Superponer una insignia o un icono en una esquina

`relative` en el padre con `absolute` en el hijo es el patrón básico.

Colocar un botón fijo

`fixed` se posiciona respecto de la ventana, así que no se mueve al desplazarse la página.

Investigar un problema de apilamiento

**Cuando un elemento se esconde bajo otro, lo primero que hay que sospechar es un contexto de apilamiento.**

Términos de position

Static: El valor inicial. **Mientras rige, ni los desplazamientos como `top` ni `z-index` surten efecto alguno.**
Relative: Desplaza el elemento **desde donde por lo demás habría estado.** Se mueve, y con todo el espacio del que partió queda reservado.
Absolute: **Se posiciona respecto del ancestro más próximo cuyo `position` no sea `static`.** A falta de él, sirve la página entera.
Fixed: Se posiciona respecto de la ventana, de modo que el elemento permanece por lejos que se desplace la página.
Sticky: Se asienta en su lugar corriente hasta alcanzar un desplazamiento dado, y entonces se adhiere. **Un `overflow` en un ancestro impide que funcione.**
Contexto de apilamiento: La unidad anidada dentro de la cual se decide el orden de apilamiento. **Un `z-index` dentro de uno no puede compararse directamente con los elementos de fuera.**

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