Tipos de Posición en Framer

En Framer, puedes controlar cómo se posicionan los elementos en tu diseño utilizando diferentes tipos de posicionamiento. Cada uno tiene un propósito específico que puede ayudarte a lograr layouts dinámicos y funcionales.

1. Relative (Relativo)

¿Qué es?

Es el posicionamiento predeterminado en Framer. Los elementos se colocan en relación con su posición normal en el flujo del diseño.

¿Cuándo usarlo?

• Cuando necesitas realizar pequeños ajustes sin cambiar la estructura general.

• Ideal para mover un elemento ligeramente sin afectar a los demás.

Ejemplo práctico:

Un botón que necesita estar un poco más arriba o a la derecha de su posición original.

2. Absolute (Absoluto)

¿Qué es?

Posiciona un elemento en relación al contenedor más cercano que tenga un posicionamiento definido (que no sea static). Si no hay un contenedor definido, se posiciona respecto al marco principal.

¿Cuándo usarlo?

• Cuando quieres colocar un elemento en un lugar específico dentro de un contenedor.

• Útil para overlays o elementos flotantes.

Ejemplo práctico:

Una etiqueta de “Oferta” que siempre aparece en la esquina superior de un producto.

3. Fixed (Fijo)

¿Qué es?

El elemento permanece en la misma posición en la pantalla sin importar cuánto scroll hagas.

¿Cuándo usarlo?

• Para menús, encabezados o botones que deben estar siempre visibles.

• Perfecto para crear elementos “sticky” que no cambian al desplazarse por la página.

Ejemplo práctico:

Un menú de navegación que permanece visible mientras el usuario explora el contenido.

4. Sticky (Pegajoso)

¿Qué es?

Una mezcla entre relative y fixed. Un elemento se comporta como relative hasta que se cumple una condición (por ejemplo, alcanzar un punto en el scroll), momento en el cual se queda fijo.

¿Cuándo usarlo?

• Para destacar secciones clave a medida que el usuario hace scroll.

• Ideal para encabezados de secciones o tablas de contenido.

Ejemplo práctico:

Un título de sección que se queda visible mientras se desplaza por su contenido, pero desaparece al llegar a la siguiente sección.

Elegir el tipo de posición correcto en Framer es esencial para lograr diseños funcionales y visualmente atractivos.

• Usa relative para ajustes simples.

• Aplica absolute para posicionamientos específicos.

• Prueba fixed para elementos siempre visibles.

• Experimenta con sticky para interacciones dinámicas.