Comprender y usar la posición relativa en Divi

La propiedad de posición relativa es quizás el más misterioso de los tipos de posición. Sin embargo, una vez que entendemos cómo funciona, podemos usarlo a nuestro favor al diseñar un sitio en Divi . Lo que descubrimos puede sorprenderte.

Descripción general de los cuatro tipos de posicionamiento de Divi

La posición relativa es uno de los cuatro tipos de posiciones disponibles en Divi. Aquí hay una descripción general rápida de cada uno a continuación.

Estático (predeterminado)

Los elementos estáticos técnicamente no están «posicionados» ya que permanecen con el flujo normal o el orden de los elementos en la página, y no responden a las propiedades superior, derecha, inferior e izquierda como otros elementos posicionados (razón por la cual no las compensaciones están disponibles en Divi para elementos en la posición estática/predeterminada). En Divi, cuando elegimos la posición predeterminada para un módulo, estamos eligiendo la posición estática. También vale la pena mencionar que algunos elementos en Divi (como filas y secciones) tendrán una posición relativa por defecto (no la posición estática).

Relativo

Los elementos posicionados relativamente 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 posicionados relativamente pueden posicionarse utilizando las propiedades superior, inferior, izquierda y derecha. Además, a diferencia de los elementos estáticos, también se pueden colocar mediante la propiedad Índice Z.

Absoluto

Un elemento con una posición absoluta sale del flujo normal del documento y, por lo tanto, no se crea ningún espacio real en la página para el elemento. Podemos pensar en él como un elemento que flota sobre los otros elementos de la página que ocupan espacio real. Se colocará en relación con el contenedor principal colocado más cercano.

Fijado

Al igual que la posición absoluta, los elementos con la posición fija se saldrán del flujo normal de la página y no se creará un espacio real dentro de la página. La diferencia clave entre absoluto y fijo es que la posición fija es relativa a la ventana del navegador o la ventana gráfica. En otras palabras, no importa dónde se encuentre el elemento dentro del flujo normal de la página, una vez que se le asigna una posición fija, su posición ahora se relacionará directamente con la ventana del navegador. Podemos usar las propiedades superior, inferior, izquierda y derecha para colocar el elemento dentro de la ventana gráfica. Debido a que los elementos fijos a menudo se ubican detrás o delante de otros elementos en la página, Z Index ayudará a ordenar los elementos fijos por encima de los demás.

NOTA: Existe otro tipo de posicionamiento en CSS llamado sticky. Un elemento con una posición fija se comporta como un elemento con una posición relativa hasta que nos desplazamos a su contenedor (en algún punto determinado por el valor superior). Luego, el elemento se vuelve fijo (o atascado) hasta que el usuario se desplaza hasta el final del contenedor. Sin embargo, la posición pegajosa puede ser un poco impredecible ya que otros factores pueden inhibir la funcionalidad. En Divi, la opción adhesiva no está disponible dentro de las opciones integradas por este motivo. Sin embargo, hay formas de usar «posición: pegajosa» en Divi.

Cómo la posición relativa «posiciona» un elemento en Divi

Como se mencionó 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 incluyen las propiedades superior, inferior, izquierda y derecha, así como la propiedad Índice Z.

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.

Uso de compensaciones con la posición relativa

Los valores Offset Origin y Offset trabajarán juntos para colocar nuestro elemento en cualquier lugar que queramos dentro del contenedor principal. En este ejemplo, tenemos un módulo que tiene una posición relativa, un desplazamiento superior izquierdo, un desplazamiento vertical de 25 px y un desplazamiento horizontal de 25 px. Observe cómo los valores de desplazamiento alejarán el elemento del origen del desplazamiento horizontal y/o verticalmente.

Aquí está el mismo módulo con los mismos desplazamientos pero con un origen de desplazamiento en la parte superior derecha.

Aquí está el mismo módulo con los mismos desplazamientos y un origen de desplazamiento inferior derecho.

Y aquí está el mismo módulo con los mismos desplazamientos y un origen de desplazamiento inferior izquierdo.

Sin sorpresas de espacio

Con el posicionamiento relativo, el espacio real del elemento permanece en su lugar original después de mover el elemento utilizando los desplazamientos (superior, inferior, izquierda, derecha). La nueva posición del elemento no se mueve ni afecta el espaciado del resto de los elementos de la página. Básicamente se cierne sobre los otros elementos como un espíritu que dejó su cuerpo.

Razones para usar la posición relativa

# 1 para renderizar un contenedor principal para elementos absolutamente posicionados

Esta es probablemente la aplicación más popular del tipo de posición relativa. Dado que cualquier elemento posicionado absolutamente es relativo al antepasado posicionado más cercano, podemos optar por hacer que uno de sus antepasados ​​sea un elemento posicionado simplemente dándole una posición relativa (la posición estática predeterminada no está técnicamente «posicionada»). Esto mantiene el flujo del documento en su lugar (como estático) y nos permite elegir un contenedor para los elementos absolutos.

#2 Para mover elementos sin afectar a los demás elementos de la página.

Con la posición relativa, podemos usar las compensaciones para empujar los elementos a la alineación sin afectar a ningún otro elemento. Y con Divi, podemos aprovechar la interfaz de usuario arrastrable para colocar elementos visualmente en tiempo real.

#3 Para usar el índice Z para superponer otros elementos

De forma predeterminada, los elementos estáticos no se pueden reordenar en el eje z a menos que se les dé la posición relativa. Una vez en la posición relativa, el elemento permanecerá posicionado en el flujo normal del documento. Solo ahora, tenemos la capacidad de aprovechar la indexación Z para colocar elementos en un orden particular cuando se superponen entre sí.

#4 Para Evitar el Uso de Margen Negativo para Propósitos de Posición

El posicionamiento relativo dejará atrás el espacio de su posición original. Sin embargo, con un margen negativo, tanto el contenido como su espacio original son reubicados. Por ejemplo, si agregamos un margen superior negativo a una fila en Divi para que la fila se superponga a la fila superior, todas las filas/contenido se moverán hacia arriba con ella. Esto deja un poco de desorden para limpiar que podría evitarse utilizando los desplazamientos de posición relativa en su lugar.

Aquí hay una ilustración de lo que sucede cuando usamos un margen superior negativo para mover un módulo hacia arriba. Observe cómo se muestran el resto de los elementos a continuación.

Si le damos al mismo módulo una posición relativa, podemos usar el desplazamiento vertical para subir el módulo sin que afecte el resto del espacio en la página.

Aunque a menudo he usado un margen negativo para colocar elementos en Divi, probablemente no sea una buena idea si podemos usar el posicionamiento relativo en su lugar. El margen se relaciona con el módulo de caja del elemento, por lo que realmente está destinado a agregar espacio dentro y alrededor del elemento en sí, no tanto para posicionar el elemento desplazado de su contenedor principal como con el posicionamiento relativo.

Posición relativa frente a traducción de transformación

La posición relativa es muy similar a usar transform translate para colocar elementos en una página. Ambos mueven el elemento dejando el espacio real en su lugar original y sin afectar a los demás elementos de la página.

Traducir es mejor para animaciones y transiciones (como efectos de desplazamiento)

Sin embargo, parece que traducir es mejor para la animación y las transiciones (como los efectos de desplazamiento) porque proporciona transiciones más rápidas y suaves. El uso de los desplazamientos superior, inferior, izquierdo y derecho para animar o hacer la transición de un elemento relativo podría ser más entrecortado y podría hacer que nuestro navegador trabaje más de lo que necesita.

Las unidades de longitud relativa responden de manera diferente

Si usamos unidades de longitud relativa (como % o vw) para el diseño receptivo, funcionarán de manera diferente con la posición relativa y la traducción de transformación.

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

Un módulo Divi con una traslación de transformación (eje X) del 50 % moverá el módulo horizontalmente una cantidad igual al 50 % del ancho del propio módulo.

Combinación de elementos de posición relativa y transformación de traslado al centro

Como acabamos de cubrir, la posición relativa es relativa al padre y la propiedad de transformación y traducción es relativa al elemento mismo. Debido a esto, podemos usar ambos en combinación para colocar los elementos de la manera que queramos. Incluso podemos utilizar esta técnica para centrar elementos en su contenedor.

Por ejemplo, podemos usar el desplazamiento horizontal de la posición relativa para colocar el módulo a la derecha exactamente el 50 % del ancho de la columna.

Luego use la propiedad de traducción para mover el módulo 50% (del ancho del módulo) hacia la izquierda. Esto asegurará que el módulo permanezca en el centro de la columna sin importar el ancho del módulo.

Pensamientos finales

Si eres como yo antes de escribir este artículo, probablemente no entendiste o no usaste muy bien el tipo de posición relativa. Quizás el aspecto más sorprendente de esta posición relativa es cómo afecta (o no afecta) al resto del diseño de la página. No solo funciona en conjunto con los elementos absolutos, sino que también funciona bien con transform translate para colocar elementos en el lugar perfecto.

¿Cuál ha sido tu experiencia con el tipo de puesto relativo?

Espero escuchar de usted en los comentarios.

¡Salud!