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 utilizarlo a nuestro favor al diseñar diseños con Divi. Aprenderás cosas nuevas en este tutorial.

De hecho, en este tutorial, discutiremos:

  • Una visión general de los cuatro tipos de posicionamiento Divi
  • Cómo la posición relativa “posiciona” un elemento en Divi
  • 4 razones que justifican el uso de la posición relativa en Divi
  • Posición relativa vs margen
  • Posición relativa vs Transformador Traducir

Presentación 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 un vistazo rápido a cada uno de ellos a continuación.

Estático (predeterminado)

Módulo con posición estática

Técnicamente, los elementos estáticos no están "posicionados" porque 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 (p. Ej. es por eso que ninguna de las compensaciones está disponible en Divi para elementos en posición estática / predeterminada). En Divi, cuando elegimos la posición predeterminada para un módulo, elegimos la posición estática. También se debe mencionar que algunos elementos de Divi (como líneas y secciones) tendrán una posición relativa por defecto (no la posición estática).

pariente

Módulo con posición relativa

Los elementos en posición relativa se parecen mucho a los 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 mediante la propiedad Z Index.

absoluto

Módulo de texto con posición absoluta y desplazamiento

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

fijo

Módulo con divi de posición fija

Al igual que la posición absoluta, los elementos con la posición fija saldrán del flujo de página normal y no tendrán espacio real creado en la página. La principal diferencia entre lo absoluto y lo fijo es que la posición fija es relativa a la ventana o ventana del navegador. En otras palabras, no importa dónde se encuentre el elemento en el flujo normal de la página, una vez que se le ha dado una posición fija, su posición ahora estará directamente vinculada a la ventana del navegador. Podemos usar las propiedades superior, inferior, izquierda y derecha para colocar el elemento en la ventana. Como los elementos fijos a menudo se sitúan detrás o delante de otros elementos de la página, el índice Z ayudará a clasificar los elementos fijos por encima de otros.

NOTA: Existe otro tipo de posicionamiento en CSS llamado sticky. Un elemento posicionado fijo se comporta como un elemento posicionado relativamente hasta que nos desplazamos a su contenedor (en un momento 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 en las opciones integradas por este motivo. Sin embargo, hay formas de utilizar "position: sticky" en Divi.

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

Como se mencionó en la vista previa, el tipo de posición relativa es similar a la "posición" estática porque el elemento permanece en el flujo normal del documento. La verdadera diferencia es que una vez que asignamos un elemento a 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.

Módulo con un posicionamiento de posición relativa en divi

Usar compensaciones con posición relativa

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

Módulo con posición relativa 2

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

Módulo con ángulo de posición relativo 2

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

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

Módulo con posición relativa angular 3

Sin espaciado sorpresa

Con el posicionamiento relativo, el espacio real del elemento permanece en su lugar original después de mover el elemento usando compensaciones (arriba, abajo, izquierda, derecha). La nueva posición del elemento no se mueve y no afecta el espaciado del resto de elementos de la página. Básicamente se cierne sobre otros elementos como un espíritu que ha abandonado su cuerpo.

Módulo con explicación de la posición de compensación relativa

Por qué usar posición relativa

Motivo 1: hacer un contenedor principal para elementos posicionados absolutamente

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 elementos absolutos.

Posición relativa 7

Motivo 2: mover elementos sin afectar a otros elementos de la página.

Con la posición relativa, podemos usar las compensaciones para alinear los elementos sin afectar a los otros elementos. Y con Divi, podemos aprovechar la interfaz de usuario móvil para posicionar visualmente los elementos en tiempo real.

Razón 3: usar el índice Z para superponer otros elementos

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

Posición de superposición relativa

Razón 4: Evitar el uso de un 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, el contenido y su espacio original están ambos desplazados. 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á con él. Esto deja un poco de desorden que limpiar y que podría evitarse utilizando en su lugar compensaciones de posición relativas.

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

Animación de posición relativa

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 en realidad está destinado a agregar espacio dentro y alrededor del elemento en sí, no tanto para colocar el elemento desplazado de su contenedor principal como para el posicionamiento relativo.

Para resumir

Es muy probable que al final del día no hayas entendido mucho. Quizás el aspecto más sorprendente de usar la posición relativa es su impacto (o impacto) en el resto del diseño de la página. No solo funciona en conjunto con los elementos absolutos, también funciona bien con la transformación traducida para colocar los elementos en el lugar perfecto.

fuente: Elegante Temas