Comprender y usar la posición relativa en Divi

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

En esta publicación cubriremos:

• Una descripción general de los cuatro tipos de posicionamiento de Divi
• Cómo la posición relativa "posiciona" un elemento en Divi
• 5 razones para usar la posición relativa en Divi
• Posición relativa frente a margen
• Posición relativa frente a transformación de traducción

¡Echale un vistazo!

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

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

Estático (predeterminado)

Técnicamente, los elementos estáticos 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 (por lo que 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 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.

Absoluto

Un elemento absolutamente posicionado se sale del flujo normal de documentos 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 posicionado más cercano.

Reparado

Al igual que la posición absoluta, los elementos con la posición fija saldrán del flujo normal de la página y no tendrán espacio real creado 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 da 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 sitúan detrás o delante de otros elementos en la página, Z Index ayudará a ordenar los elementos fijos por encima de otros.

NOTA: Existe otro tipo de posicionamiento en CSS llamado pegajoso. Un elemento posicionado de forma pegajosa se comporta como un elemento posicionado relativamente hasta que nos desplazamos a su contenedor (en algún punto determinado por el valor superior). Luego, el elemento se fija (o se atasca) hasta que el usuario se desplaza hasta el final del contenedor. Sin embargo, la posición fija 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 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 incluyen las propiedades superior, inferior, izquierda y derecha, así como la propiedad del í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.

Usar compensaciones con la posición relativa

Los valores de 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 en la parte superior izquierda, 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 de desplazamiento horizontal y / o verticalmente.

Aquí está el mismo módulo con las mismas compensaciones pero con un origen de compensación en la parte superior derecha.

Aquí está el mismo módulo con las mismas compensaciones y un origen de compensación en la parte inferior derecha.

Y aquí está el mismo módulo con las mismas compensaciones y un origen de compensación en la parte inferior izquierda.

Sin sorpresas de espaciado

Con el posicionamiento relativo, el espacio real del elemento permanece en su lugar original después de que el elemento se mueve usando las compensaciones (arriba, abajo, 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 utilizar 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 absolutamente posicionado es relativo al ancestro posicionado más cercano, podemos optar por hacer de uno de sus ancestros un elemento posicionado simplemente dándole una posición relativa (la posición estática predeterminada no es técnicamente "posicionado"). Esto mantiene el flujo de documentos 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 alinearlos sin afectar a ningún otro elemento. Y con Divi, podemos aprovechar la interfaz de usuario que se puede arrastrar 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 proporcione 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 Z Indexing para colocar elementos en un orden particular cuando se superponen entre sí.

# 4 para evitar el uso de margen negativo para fines 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 se reubican. 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 lío para limpiar que podría evitarse utilizando en su lugar las compensaciones de posición relativa.

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 el resto de los elementos siguientes aparecen con él.

Si le damos al mismo módulo una posición relativa, podemos usar el desplazamiento vertical para llevar el módulo hacia arriba sin que afecte al 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 colocar el elemento desplazado de su contenedor principal como con el posicionamiento relativo.

Posición relativa vs Transformación de traducció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 la traducción es mejor para la animación y las transiciones (como los efectos de desplazamiento) porque proporciona transiciones más rápidas y suaves. Usar las compensaciones superior, inferior, izquierda y derecha 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 necesario.

Las unidades de longitud relativa responden de manera diferente

Si usamos unidades de longitud relativa (como% o vw) para el diseño receptivo, estas 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 traducción de transformación (eje X) del 50% moverá el módulo horizontalmente la cantidad equivalente al 50% del ancho del módulo en sí.

Combinación de elementos de posición relativa y traslación de transformación a centro

Como acabamos de cubrir, la posición relativa es relativa al padre y la propiedad transform translate es relativa al elemento en sí. Debido a esto, podemos usar ambos en combinación para posicionar 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 translate 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 impacta (o no impacta) el resto del diseño de la página. No solo funciona en conjunto con los elementos absolutos, sino que también funciona bien con la traducción de transformación para colocar elementos en el lugar perfecto.

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

Espero tener noticias tuyas en los comentarios.

¡Salud!