Una guía para entender y usar la posición absoluta de Divi

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

La posición absoluta es una de las cuatro opciones de posición 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). La posición estática es la posición predeterminada para cualquier elemento CSS. En Divi, cuando eliges la posición predeterminada para un módulo, estás 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. Puede considerarlo como un elemento que flota sobre los demás 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. Puede utilizar 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 se desplaza 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 position:sticky en Divi.

Cómo la Posición Absoluta “posiciona” un elemento en Divi

Como se mencionó en la descripción general, un elemento absolutamente posicionado se ubicará en relación con el contenedor principal posicionado más cercano. Un contenedor principal posicionado es cualquier contenedor al que se le asigna un valor de posición que no sea estático (es decir, relativo, absoluto, fijo). Es por eso que, en la mayoría de los casos, si desea colocar un elemento (como un módulo) absolutamente dentro de su contenedor principal (o columna), querrá darle a la columna una posición relativa antes de colocar el módulo secundario de forma absoluta. De lo contrario, el módulo posicionado absolutamente buscará más arriba en el documento/página el ancestro más cercano con una posición que no sea estática. Por esta razón, en Divi, las secciones y las filas tienen la posición relativa por defecto para que puedas colocar elementos absolutamente dentro de esos elementos fácilmente.

Aquí hay una ilustración de lo que hará el módulo absolutamente posicionado si anulo la posición predeterminada de Divi para una columna y la configuro en estática. Tenga en cuenta que dado que la columna ya no tiene una posición, el módulo ahora se volverá relativo a la fila que tiene una posición (relativa).

Beneficios y desventajas de usar la posición absoluta en Divi

La posición absoluta es solo uno de los varios métodos para posicionar elementos. Por lo tanto, sería útil cubrir algunos de los beneficios y desventajas de usar la posición absoluta en lugar de otras.

Beneficios

Aquí hay algunos beneficios de usar la posición absoluta sobre otras propiedades de posicionamiento como Transform Translate o Margins:

Buena herramienta de diseño

Posición absoluta Se sale del flujo normal para que el espacio real del elemento no afecte el diseño después de que se realice el posicionamiento. Aunque esto también puede ser un inconveniente, puede ser beneficioso siempre que desee agregar elementos a un diseño ya establecido sin ninguna limpieza adicional que pueda ser necesaria para agregar espacio adicional al diseño. En otras palabras, puede agregar elementos a la página sin tener que mover los elementos existentes para hacerlo.

Una Buena Alternativa a Flotadores y Márgenes

Con la posición absoluta, no tiene que depender de elementos flotantes ni de usar márgenes para lograr un posicionamiento similar. Aunque no es una opción nativa dentro de Divi, aquellos que están familiarizados con CSS saben que puede usar elementos flotantes para colocar elementos a la derecha o a la izquierda, lo que puede ser un poco impredecible en algunos casos. Lo mismo ocurre con el uso de márgenes para colocar elementos. A veces es difícil predecir los valores de margen exactos para colocar un elemento en la posición correcta sin dejar espacios innecesarios. Usar una posición absoluta puede ser una buena alternativa de «posicionamiento preciso» tanto para flotantes como para márgenes.

Buen soporte de navegador

La propiedad de posición absoluta es ampliamente compatible con todos los principales navegadores, por lo que generalmente puede confiar en que no romperá las cosas en otros navegadores inesperadamente.

inconvenientes

Aquí hay algunos inconvenientes a tener en cuenta al usar la posición absoluta:

Riesgo de aislamiento

Debido a que los elementos posicionados de forma absoluta se salen del flujo normal del documento, puede ser difícil agregar elementos adicionales cerca de él. Se aíslan de otros elementos en la página. Por ejemplo, normalmente en Divi, si desea agregar un botón debajo de un módulo de texto, simplemente puede agregar un módulo y residirá automáticamente debajo del módulo de texto. Pero si el módulo de texto se colocó de forma absoluta, también tendría que colocar el módulo de botón de forma absoluta y luego usar las propiedades superior, inferior, izquierda y derecha para colocar el botón debajo del módulo de texto. Sin embargo, podría ser más fácil colocar una columna (el contenedor del módulo principal) absolutamente para que todos los módulos dentro de la columna puedan seguir el flujo normal del documento (como colocar un grupo de módulos en lugar de uno).

Menos receptivo

Además, debido a que los elementos absolutamente posicionados se salen del flujo del documento, puede ser difícil hacer que el posicionamiento responda a los dispositivos móviles. De hecho, muchos desarrolladores evitan position:absolute debido a los desafíos que conlleva el diseño receptivo . Por lo tanto, es importante utilizar unidades de longitud relativa (como vw o %) en lugar de unidades de longitud absoluta (como px) cuando sea necesario.

Uso de los puntos de ubicación con la posición absoluta

Las opciones de ubicación de posición que están integradas en el constructor Divi hacen que sea realmente fácil colocar elementos simplemente haciendo clic en un punto de ubicación. Una vez que se ha seleccionado el punto de ubicación, puede usar los desplazamientos verticales y horizontales para realizar ajustes de posición adicionales desde ese punto de ubicación.

De forma predeterminada, el punto de ubicación se establecerá en la parte superior izquierda. Por lo tanto, agregar los desplazamientos verticales y horizontales a esa ubicación agregará espacio adicional desde la parte superior y desde la izquierda.

Desde la ubicación de la esquina superior derecha, el desplazamiento vertical agregará espacio desde la parte superior y el desplazamiento horizontal agregará espacio a la derecha.

Desde la ubicación de la esquina inferior derecha, el desplazamiento vertical agregará espacio desde la parte inferior y el desplazamiento horizontal agregará espacio a la derecha.

Desde la ubicación de la esquina inferior izquierda, el desplazamiento vertical agregará espacio desde la parte inferior y el desplazamiento horizontal agregará espacio desde la izquierda.

Realización de ajustes en elementos absolutos centrados

Cada vez que selecciona una opción de ubicación con una posición centrada, Divi usa una combinación de propiedades CSS para asegurarse de que el elemento esté perfectamente centrado sin importar el tamaño. Por ejemplo, si selecciona la ubicación de la posición centrada a la izquierda, Divi colocará el elemento de la siguiente manera:

Así es como se ve el CSS en el backend.

La parte superior: 50% está ahí para colocar la parte superior del elemento exactamente al 50% de la parte superior de su contenedor. El transform:translateY(-50%) está ahí para llevar el elemento hacia arriba exactamente la mitad de su propia altura. Esto le da un elemento perfectamente colocado sin importar la altura.

Es importante saber esto en caso de que desee realizar ajustes adicionales (o compensaciones) a un elemento en una posición centrada. No desea cometer el error de utilizar la opción de traducción de transformación sin conocer los valores que ya se están utilizando. Por esta razón, sería mejor hacer ajustes más pequeños utilizando la propiedad de margen en Divi en lugar de transformar y traducir, a menos que comprenda lo que está haciendo.

Uso de la opción de traducción de transformación para posicionar varios elementos absolutos para la ubicación centrada

Si comprende cómo se usa transform:translate, en realidad puede ser muy útil para compensar elementos centrados sin tener que saber el ancho del elemento.

Por ejemplo, supongamos que coloca un módulo para que esté centrado tanto vertical como horizontalmente con una columna en Divi. Se vería así.

Si le di al elemento una traducción de transformación de la siguiente manera, nada cambiará:

• Transformar traducir (Y): -50%
• Transformar Traducir (X): -50%

Esto se debe a que Divi ya lo hace automáticamente en el backend por ti. Sabiendo esto, puede hacer ajustes desde la ubicación del punto central usando la opción de transformación y traducción. Y si usa la unidad de porcentaje de longitud, no tiene que conocer el ancho o la altura del módulo para realizar ajustes, ya que 100 % es igual a la anchura o la altura del módulo. Entonces, si desea agregar cuatro módulos al centro de la columna, puede usar las opciones de transformación para compensar cada uno de los módulos absolutamente posicionados.

Para hacer esto, crearía cuatro módulos y les daría a todos una posición absoluta con una ubicación centrada vertical y horizontalmente.

Luego, use las opciones de transformación y traducción para ajustar la posición de los módulos según el porcentaje del ancho y la altura del módulo en consecuencia. Por ejemplo, dar a un módulo un valor del eje Y de transformación de traducción de -100 % elevará el módulo a la altura exacta del módulo. Darle al módulo un valor en el eje X de -100% moverá el módulo hacia la izquierda con el ancho exacto del módulo. Esta puede ser una gran forma de combinar elementos que estén absolutamente centrados.

Ejemplo de caso de uso: Posicionamiento absoluto de botones para desenfoques de la misma altura

Una aplicación práctica de usar la posición absoluta en Divi es darle a un botón una posición absoluta dentro de una columna para que el botón permanezca en la parte inferior de la columna aunque la cantidad (o la altura) del contenido sobre él pueda cambiar. Esta puede ser una excelente manera de mantener la consistencia del diseño al presentar elementos en su página.

Aquí está cómo hacerlo.

Primero, agregue una fila de una columna a la sección.

Luego agregue un módulo de propaganda a la columna.

A continuación, agregue un módulo de botón debajo del módulo de publicidad.

Abra la configuración de la fila y duplique la columna dos veces para obtener un total de tres columnas idénticas, cada una con el mismo módulo de publicidad y botón.

Luego vaya a la configuración de la fila y seleccione la opción para igualar las alturas de las columnas. Esto asegurará que las columnas se ajusten a la altura de la columna con la mayor altura (o la mayor parte del contenido).

Ahora actualice el contenido del cuerpo de cada uno de los módulos publicitarios para que la cantidad de contenido difiera con cada columna. Debería ver que el botón a continuación se moverá a la posición directamente debajo del módulo de publicidad, haciendo que cada uno de los botones esté en una posición diferente dentro de la columna.

Usando la selección múltiple, seleccione cada uno de los módulos de botones y actualice la siguiente configuración de elementos para cada uno de los botones:

• Posición: Absoluta
• Ubicación: abajo a la izquierda

Esto posicionará cada uno de los botones absolutamente en la parte inferior izquierda de la columna. Pero dado que los botones ahora están fuera del flujo normal de los elementos en la página, notará que hay cierta superposición con el botón y el módulo de publicidad en la columna del extremo izquierdo. Para solucionar esto, simplemente necesitamos hacer algo de espacio real para el botón agregando algo de relleno a la columna de la siguiente manera:

• Relleno: 50px inferior

Ahora tiene tres elementos destacados con una ubicación de botón uniforme para cada uno, aunque la cantidad de contenido (o la altura de la propaganda) puede cambiar.

Pensamientos finales

Espero que esta publicación haya arrojado algo de luz sobre la propiedad de posición absoluta y cuán poderosa puede usarse dentro de Divi. Una vez que comprenda cómo funciona la posición, puede usar para agregar todo tipo de elementos de diseño precisos que llevarán su sitio web al siguiente nivel.

Espero escuchar de usted en los comentarios.

¡Salud!