Saltar al contenido principal

Cómo entender las posiciones relativas en Divi

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

La propiedad de posición relativa es quizás el más misterioso de los tipos de posición. Sin embargo, una vez que comprendamos cómo funciona, podemos usarlo 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 una descripción rápida de cada uno de ellos a continuación.

Estático (predeterminado)

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 (c ' Es por eso que no hay compensaciones disponibles 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 debe mencionarse que algunos elementos Divi (como líneas y secciones) tendrán una posición relativa por defecto (no la posición estática).

pariente

Los elementos relativamente posicionados son un poco como los elementos estáticos, ya que siguen el flujo normal de la página. La principal diferencia es que los elementos relativamente posicionados se pueden posicionar 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 Índice Z.

absoluto

Un elemento posicionado absolutamente deja el flujo normal de documentos y, por lo tanto, no se crea espacio real en la página para el elemento. Podemos considerarlo 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

Al igual que la posición absoluta, los elementos con la posición fija dejarán el flujo normal de la página y no tendrán espacio real creado en la página. La principal diferencia entre absoluto y fijo es que la posición fija es relativa a la ventana o la 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 haya recibido 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. Dado que los elementos fijos a menudo se ubican detrás o delante de otros elementos en la página, Z Index ayudará a clasificar los elementos fijos por encima de los demás.

NOTA: Hay otro tipo de posicionamiento en CSS llamado pegajoso. Un elemento de posición fija se comporta como un elemento relativamente posicionado hasta que nos desplazamos a su contenedor (en un momento determinado por el valor superior). Luego, el elemento se vuelve fijo (o bloqueado) 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 fija no está disponible en las opciones integradas por este motivo. Sin embargo, hay formas de usar "position: sticky" en Divi.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

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. 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 Í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 posición relativa

El origen de desplazamiento y los valores de desplazamiento trabajarán juntos para posicionar nuestro elemento donde queremos en el 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 píxeles y un desplazamiento horizontal de 25 píxeles. Observe cómo los valores de desplazamiento desplazarán el elemento desde el 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 en la parte inferior derecha.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

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

Sin sorpresas espaciadas

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

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 posicionado absolutamente es relativo al antepasado posicionado más cercano, podemos elegir hacer de uno de sus antepasados ​​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.

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

Con la posición relativa, podemos usar los desplazamientos para empujar los elementos en alineación 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.

Motivo 3: utilizar el índice Z para superponer otros elementos

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

Razón 4: para evitar el uso de un 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, el contenido y su espacio original se mueven. Por ejemplo, si agregamos un margen superior negativo a una línea en Divi para que la línea se superponga a la línea que está encima, todas las líneas / contenido se moverán con ella. Esto deja un poco de desorden para limpiar que podría evitarse utilizando cambios de posición relativos.

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

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

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

Para resumir

Es muy probable que al final no hayas entendido mucho. Quizás el aspecto más sorprendente del uso de la posición relativa es su impacto (o su impacto) en 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 transformación traducida para colocar los elementos en el lugar perfecto.

fuente: Elegante Temas

Este artículo contiene los comentarios 0

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
1 acciones
cuota1
Tweet
Siguiente