Una guía para comprender y utilizar la posición absoluta de Divi

La propiedad de posición absoluta es uno de los cuatro tipos de posición principales disponibles dentro de las nuevas opciones de posición de Divi. En este tutorial, exploraremos lo que significa darle a un elemento una posición absoluta en Divi y cómo puede usarlo en su beneficio al diseñar sitios Divi.

En esta publicación cubriremos:

• Una descripción general de los cuatro tipos de posicionamiento de Divi
• Cómo la posición absoluta "posiciona" un elemento en Divi
• Beneficios e inconvenientes de usar la posición absoluta en Divi
• Usando los puntos de ubicación con la posición absoluta
• Ejemplo de caso de uso: posicionar botones absolutamente para desenfoques de la misma altura

¡Echale un vistazo!

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)

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). La posición estática es la posición predeterminada para cualquier elemento CSS. En Divi, cuando elige la posición predeterminada para un módulo, está 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. Puede 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. 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 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 se desplaza 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 la posición: pegajosa en Divi.

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

Como se menciona en la descripción general, un elemento absolutamente posicionado se colocará en relación con el contenedor principal posicionado más cercano. Un contenedor principal posicionado es cualquier contenedor al que se le da 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 absolutamente. De lo contrario, el módulo absolutamente posicionado buscará más arriba en el documento / página el antepasado 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 pueda 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 como estática. Tenga en cuenta que dado que la columna ya no tiene una posición, el módulo ahora será relativo a la fila que sí tiene una posición (relativa).

Beneficios e inconvenientes de usar la posición absoluta en Divi

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

Beneficios

A continuación, se muestran algunos beneficios de usar la posición absoluta sobre otras propiedades de posicionamiento como Transform Translate o Márgenes:

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 realiza 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 los flotadores y los márgenes

Con la posición absoluta, no tiene que depender de elementos flotantes o 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 flotadores para colocar elementos a la derecha oa la izquierda, lo que puede ser un poco defectuoso e 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 correctamente sin dejar espacios innecesarios. El uso de una posición absoluta puede ser una buena alternativa de “posicionamiento preciso” tanto para flotadores como para márgenes.

Buen soporte de navegador

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

Inconvenientes

A continuación, se muestran algunos inconvenientes a tener en cuenta al utilizar la posición absoluta:

Riesgo de aislamiento

Debido a que los elementos absolutamente posicionados se salen del flujo normal de documentos, puede resultar difícil agregar elementos adicionales cerca de ellos. Se aíslan de otros elementos de 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 automáticamente residirá 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 botones 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 de documentos (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 de documentos, puede resultar difícil hacer que el posicionamiento responda a los dispositivos móviles. De hecho, muchos desarrolladores evitan la posición: absoluta debido a los desafíos que conlleva el diseño receptivo. Por lo tanto, es importante usar unidades de longitud relativa (como vw o%) en lugar de unidades de longitud absoluta (como px) cuando sea necesario.

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

Las opciones de ubicación de posición que están integradas en el generador de Divi facilitan la colocación de elementos de manera absolutamente simple haciendo clic en un punto de ubicación. Una vez que se ha seleccionado el punto de ubicación, puede utilizar los desplazamientos vertical y horizontal 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 las compensaciones verticales y horizontales a esa ubicación agregará un 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.

Realizar ajustes en elementos absolutos centrados

Siempre 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.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

La parte superior: el 50% está ahí para colocar la parte superior del elemento exactamente al 50% de la parte superior de su contenedor. La transformación: 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 querrá cometer el error de utilizar la opción de conversión de transformación sin conocer los valores que ya se están utilizando. Por esta razón, sería mejor realizar ajustes más pequeños utilizando la propiedad margin en Divi en lugar de transform translate a menos que comprenda lo que está haciendo.

Uso de la opción Transformar traslación para colocar 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 conocer el ancho del elemento.

Por ejemplo, digamos 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á:

• Transformación de traducción (Y): -50%
• Transformación de traducción (X): -50%

Esto se debe a que Divi ya lo hace automáticamente en el backend. Sabiendo esto, puede realizar ajustes desde la ubicación del punto central utilizando la opción de traducción de transformación. Y si utiliza la unidad de porcentaje de longitud, no es necesario que conozca el ancho o la altura del módulo para realizar ajustes, ya que el 100% es igual al ancho 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, debe crear cuatro módulos y darles a todos una posición absoluta con una ubicación que esté centrada vertical y horizontalmente.

Luego, use las opciones de traducción de transformación para ajustar la posición de los módulos de acuerdo con el porcentaje de ancho y alto del módulo en consecuencia. Por ejemplo, darle a un módulo un valor del eje Y de conversión de transformación de -100% hará que el módulo suba la altura exacta del módulo. Darle al módulo un valor del eje X de -100% moverá el módulo hacia la izquierda el ancho exacto del módulo. Este puede ser un gran wat para combinar elementos que estén absolutamente centrados.

Ejemplo de caso de uso: posicionar botones absolutamente 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 altura) del contenido por encima de ella pueda cambiar. Esta puede ser una excelente manera de mantener la coherencia del diseño al presentar elementos en su página.

He aquí 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 botones debajo del módulo de propaganda.

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 de propaganda para que la cantidad de contenido difiera con cada columna. Debería ver que el botón de abajo se moverá a la posición directamente debajo del módulo de propaganda, 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: Absoluto
• Ubicación: Abajo a la izquierda

Esto colocará 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 propaganda en la columna de la izquierda. Para solucionar esto, simplemente necesitamos hacer un espacio real para el botón agregando algo de relleno a la columna de la siguiente manera:

• Acolchado: 50px inferior

Ahora tiene tres elementos destacados con una ubicación de botón consistente 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 se puede usar dentro de Divi. Una vez que comprenda cómo funciona el puesto, puede usar para agregar todo tipo de elementos de diseño precisos que llevarán su sitio web al siguiente nivel.

Espero tener noticias tuyas en los comentarios.

¡Salud!