Posición relativa en Divi: qué es y cómo usarla

Tiempo de lectura estimado: 0 minutos

Los elementos posicionados de forma relativa son como elementos estáticos en el sentido de que siguen el flujo normal de la página. La principal diferencia es que los elementos relativamente posicionados se pueden colocar utilizando las propiedades superior, inferior, izquierda y derecha.

Además, a diferencia de los elementos estáticos, también se pueden colocar utilizando la propiedad Z Index (posición de los elementos delante del otro).

Qué es realmente la posición relativa y por qué importa tanto

Antes de entrar en los usos prácticos, vale la pena que entiendas el concepto desde su raíz, porque cuando lo comprendes a fondo empiezas a usarlo con criterio. La posición relativa es, en esencia, una forma de mover un elemento respecto a sí mismo sin sacarlo del flujo del documento. El navegador sigue reservando el espacio original que ocupaba, aunque visualmente lo veas desplazado.

Esta es la diferencia clave con la posición absoluta, que sí saca por completo al elemento del flujo y deja que los demás elementos ocupen su lugar como si nunca hubiera estado ahí. Con la posición relativa el "fantasma" del elemento permanece, y eso es justamente lo que te da control fino: puedes empujar un módulo unos píxeles para que se superponga ligeramente con la sección anterior, sin que el resto del diseño colapse de forma impredecible. Es el punto donde más gente se traba: confunden los cuatro tipos de posición y terminan usando la absoluta para todo, generando diseños frágiles. Entender esto te ahorra horas de frustración.

Usos de la posición relativa en Divi

Mover elementos sin afectar otros elementos de la página

Como se menciona en la descripción general, el tipo de posición relativa es similar a la posición estática porque el elemento permanece en el flujo normal del documento (el HTML en la página). La verdadera diferencia es que una vez que asignamos un elemento con la posición relativa, ahora tiene nuevas opciones disponibles para posicionar el elemento. Estas opciones van desde el movimiento del elemento a posicionar así como los pixeles que podemos moverlos hacia el lado superior, inferior, izquierda y derecha, así como la propiedad del índice Z.

si quieres aprender a usar el Theme Builder de Divi, tenemos este tutorial que te puede interesar, con regalo incluido.

En Divi, estas opciones de posición adicionales se pueden encontrar en el grupo de opciones de posición una vez que se ha seleccionado la posición relativa.

El la posición relativa en Divi funciona de manera similar a la posición por defecto, con una diferencia muy importante: ni los elementos circundantes ni el elemento principal se ven afectados por los valores que mueven al elemento principal. Todo lo demás se muestra como si estuviera en su posición original.

Superponer elementos con Index Z

Los elementos en posición estática no pueden ser ubicados en el eje Z, así que debemos cambiarlos a la posición relativa, lo cual le permitirá pertenecer al flujo normal del documento. Hacer este cambio nos permitirá usar el Index Z y ubicar elementos superpuestos en caso de necesitarlo.

Para evitar posicionar elementos usando el margen negativo

La posición relativa deja atrás el espacio de su posición original, por ende al agregar un margen negativo, el elemento se moverá junto con su espacio original, por lo cual es recomendable usar los offsets o valores de compensación para ajustar lo que necesites.

Por ejemplo, si añades un margen negativo a una columna de manera que se superponga a la columna de arriba, todas las columnas y su contenido se moverán junto con esta columna de margen negativo.

Consejo: Cuando necesites superponer dos secciones en Divi, deja de usar márgenes negativos como primera opción. Cambia la sección de abajo a posición relativa y súbela con el offset vertical: el resto del diseño se queda quieto y el resultado es mucho más predecible al cambiar el contenido o el dispositivo.

Cómo usar el valor de compensación (offset)

Para usar el offset solo debes escoger uno que servirá de origen y a partir del cual se moverán los valores vertical y horizontal (en píxeles o usando la barra deslizante) para posicionar el elemento donde quieras mientras esté dentro del contenedor padre.

Aprende a usar Divi de una manera profesional con nuestro cursos premium desde $15 USD /mes

Si seleccionas como origen el offset superior izquierdo y ajustas los valores en la esquina superior izquierda, conforme añadas espacio vertical y horizontal verás al elemento moverse a la derecha y a hacia abajo. Algo muy similar sucederá dependiendo de qué esquina escojas como referencia para posicionar el elemento.

Un detalle clave es que el punto de origen define el sentido del movimiento. Si eliges la esquina superior derecha como origen, los valores positivos empujarán el elemento hacia la izquierda, al revés del origen superior izquierdo. Tener esto presente te evita la confusión típica de "puse un valor positivo y el módulo se fue para el lado contrario": simplemente estás midiendo desde otra esquina.

Diferencias entre la posición relativa y transform translate

Estas dos modalidades ofrecen movimiento al elemento sin afectar los otros en la página. Veamos sus dos diferencia principales.

• Translate es más adecuado para animaciones y transiciones como el hover, porque ofrece efectos más suaves y fluidos. Usar una posición relativa en un elemento animado podría hacer que el navegador trabaje más.

• Si estamos utilizando unidades de longitud relativa (como % o vw) para un diseño responsive, estas funcionarán de manera diferente con la posición relativa y transform translate.

Un módulo Divi con una posición relativa y un desplazamiento horizontal del 50% moverá el módulo horizontalmente la cantidad igual al 50% del ancho del contenedor primario (o columna).

Un módulo Divi con transform translate (eje X) del 50% moverá el módulo horizontalmente la cantidad igual al 50% del ancho del propio módulo.

En resumen: con la posición relativa el módulo se mueve respecto al tamaño del contenedor, con transform translate se mueve respecto al tamaño del módulo.

Esta distinción tiene consecuencias reales. Si moviste un elemento con offset relativo del 50%, en pantallas más pequeñas el contenedor cambia de tamaño y el elemento se reubica de forma proporcional, lo que a veces te juega en contra. En cambio, transform translate se mueve respecto al propio elemento, que es más constante. Por eso, cuando quiero un desplazamiento coherente entre dispositivos, prefiero translate, y dejo la posición relativa para cuando necesito que el movimiento "respire" con el contenedor.

Cómo combinar la posición relativa con transform translate

Ya que sabemos la diferencia entre ambas modalidades de posicionamiento, puedes usarlas a tu favor para centrar correctamente un elemento dentro de un contenedor (¡o hacer lo que necesites!).

¿Te gustaría aprender a usar ACF con el contenido dinámico de Divi? Revisa este contenido, te encantará.

Si usas la posición relativa en Divi con un offset fijo arriba a la izquierda y mueves el módulo de forma horizontal (se moverá hacia la derecha) en un 50%, puedes usar la propiedad transform para mover el módulo -50% a la izquierda. Con estas dos modificaciones, el módulo quedaría en el centro sin importar el tamaño del contenedor.

Este truco del 50% combinado con el -50% es uno de los patrones de centrado más confiables que existen, porque cada propiedad mide desde una referencia distinta. Lo bonito es que no depende del ancho concreto del elemento: funciona igual con un botón pequeño que con un bloque ancho.

Trabajamos esta guía siguiente el post original de ET donde nos explican a detalle está información en inglés.

Errores comunes al usar la posición relativa en Divi

A lo largo de los años he visto repetirse los mismos tropiezos con esta opción. El más frecuente es esperar que la posición relativa "cierre" el hueco que deja el elemento al moverse: no lo hace, el espacio original se queda ahí. Si buscas que el contenido de alrededor se reacomode, esta no es la herramienta, y deberías mirar hacia márgenes, padding o la posición absoluta según el caso.

Consejo: Antes de pelearte con la posición relativa para un layout complejo, pregúntate si el módulo de fila o sección de Divi ya te da el resultado con sus propias opciones de alineación y espaciado. Muchas veces el posicionamiento manual es la solución para casos puntuales de superposición y detalle fino, no para estructurar toda la página.

Preguntas frecuentes

¿Cuál es la diferencia entre posición relativa y absoluta en Divi?

La posición relativa mantiene al elemento dentro del flujo del documento y conserva el espacio que ocupaba originalmente, moviéndolo respecto a sí mismo. La posición absoluta saca al elemento por completo del flujo y lo ubica respecto a su contenedor padre posicionado, dejando que el resto del contenido ocupe su lugar. Usa la relativa cuando quieras ajustes finos sin desordenar el diseño, y la absoluta cuando necesites superponer un elemento de forma libre.

¿Por qué mi Z Index no funciona en Divi?

Casi siempre es porque el elemento sigue en posición estática, que es la posición por defecto. El Z Index solo afecta a elementos con posición relativa, absoluta o fija. Cambia el módulo a posición relativa y luego ajusta el valor del índice Z: verás que ahora sí puedes controlar qué elemento queda delante de cuál.

¿La posición relativa afecta el diseño responsive?

Puede afectarlo si usas offsets en porcentaje, porque esos valores se calculan respecto al ancho del contenedor, que cambia entre dispositivos. Para evitar sorpresas, revisa siempre las vistas de tablet y móvil después de aplicar posición relativa, y define valores distintos por breakpoint cuando el diseño lo requiera. Divi permite configurar offsets independientes para cada dispositivo.

Conclusión

La posición relativa en Divi es una de esas herramientas que parecen simples al principio pero que, bien entendidas, te abren un mundo de posibilidades para el diseño fino. Saber que conserva el espacio original del elemento, que habilita el Z Index para superponer capas, y que puede combinarse con transform translate para centrados exactos, te convierte en un diseñador mucho más preciso y con menos sorpresas a la hora de ver el resultado en distintos dispositivos.

Lo más valioso es que todo esto lo controlas de forma visual desde el constructor, sin tocar una línea de CSS. Te invito a abrir un diseño en blanco y practicar cada caso que vimos: mover sin afectar, superponer con Z Index y centrar combinando ambas técnicas. Cuando los domines, vas a usar la posición relativa con total confianza.

🎓 ¿Quieres dominar Divi 5 de principio a fin, incluyendo el posicionamiento avanzado y el Theme Builder? Mira el curso Divi 5 completo y construye sitios profesionales con total control sobre cada elemento. Te espero adentro.

¿Ya se te ocurre cómo usar esta propiedad de posición? ¡Queremos ver!

Puede que también te interese:

Nos leemos en la próxima.