Una guía para la comprensión y el uso de la posición absoluta de div.

La propiedad de la posición absoluta es uno de los cuatro tipos principales de posiciones disponibles en las nuevas opciones de posición del Div. En este tutorial, exploraremos lo que significa darle a un elemento una posición absoluta en la división y cómo puede usarlo para su ventaja al diseñar sitios de la división. En esta publicación cubriremos:
Una presentación general de los cuatro tipos de posicionamiento de div.
Cómo la posición absoluta “posiciona” un elemento en el div
Ventajas y desventajas del uso de una posición absoluta en Div
Uso de puntos de ubicación con una posición absoluta
Ejemplo de caso de uso: botones de posicionamiento absoluto para la misma altura
¡Échale un vistazo!
La presentación general de los cuatro tipos de posicionamiento de la posición absoluta es una de las cuatro opciones de posición disponibles en el DIV. A continuación se muestra una presentación rápida de cada uno. Estático (predeterminado)

Desde un punto de vista técnico, los elementos estáticos no están “posicionados”, porque permanecen en el flujo normal o al orden de los elementos en la página y no responden a las propiedades superiores, derecha e izquierda como otros elementos (que ¿Es por qué no hay compensaciones disponibles en Divin para los elementos en la posición estática / predeterminada)? La posición estática es la posición predeterminada para cualquier elemento CSS. En DIV, al elegir la posición predeterminada para un módulo, elija la posición estática. También vale la pena mencionar que algunos elementos en la división (como líneas y secciones) tendrán implícitamente una posición relativa (no la posición estática).
Pariente

Los elementos relativamente posicionados son un tipo de elementos estáticos en el sentido de que sigue 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 del índice z. El elemento absolutamente posicionado sale del flujo normal de documentos y, por lo tanto, no se crea espacio real en la página. Puedes pensar en ello como un elemento que flota por encima de los otros elementos en la página que ocupa un espacio real. Se colocará en relación con el contenedor principal posicionado más cercano.

Fijado
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 en 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 de observación. En otras palabras, sin importar dónde se encuentre el elemento en el 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 usar las propiedades superior, inferior, izquierda y derecha para colocar el elemento en la ventana de vista. Debido a que los elementos fijos a menudo se colocarán detrás o delante de otros elementos en la página, el índice Z ayudará a ordenar elementos fijos por encima de otros.

Nota: Hay otro tipo de posicionamiento en CSS llamado Sticky. Un elemento posicionado pegajoso se comporta como un elemento relativamente posicionado hasta que corre hacia su contenedor (en un momento determinado determinado por el valor anterior). Luego, el elemento se fija (o bloquea) hasta que el usuario se ejecuta hasta el final del contenedor. Sin embargo, la posición adhesiva puede ser ligeramente impredecible, porque otros factores pueden inhibir la funcionalidad. En la división, la opción pegajosa no está disponible en las opciones construidas por este motivo. Sin embargo, hay formas de usar la posición: pegajosa en la división. Como la posición absoluta “posiciona” un elemento en la división como se menciona en la presentación general, se colocará un elemento absolutamente posicionado en relación con el contenedor principal posicionado más cercano. Un contenedor principal posicionado es cualquier contenedor al que se da una posición de posición de otra cosa que no sea estática (es decir, relativa, absoluta, fija). Por lo tanto, en la mayoría de los casos, si desea colocar un elemento (como un módulo absoluto) en el contenedor principal (o columna), querrá darle a la columna una posición relativa antes de colocar al niño absoluto. Si no, el módulo absolutamente posicionado se verá más lejos en el documento / página para el antepasado más cercano con una posición estática diferente. Por esta razón, en las divisiones, las secciones y las filas tienen la posición relativa de forma predeterminada, por lo que puede colocar elementos absolutos dentro de esos elementos fácilmente.
Aquí hay una ilustración de lo que hará que el módulo se coloque absolutamente si cancelé la posición predeterminada de DIV para una columna y la configuré en Static.Tenga en cuenta que, dado que la columna ya no tiene una posición, el módulo ahora se volverá relativo al giro que tiene una posición (relativa). Los avances y desventajas de usar la posición absoluta en la posición absoluta son solo uno de los diferentes métodos de posicionando los elementos.Por lo tanto, sería útil cubrir algunos de los beneficios y desventajas del uso de la posición absoluta en lugar de otras.Los beneficios aquí son algunas ventajas de usar la posición absoluta en comparación con otras propiedades de posicionamiento, como la transformación o los márgenes:
La buena posición absoluta del instrumento de diseño sale del flujo normal, de modo que el espacio real del artículo no afecta el diseño después de que se haya producido el posicionamiento. Aunque esto también puede ser una desventaja, esto puede ser beneficioso cuando desee agregar elementos a un diseño ya establecido, sin ninguna limpieza adicional que pueda ser necesaria para agregar espacio adicional a la apariencia. En otras palabras, puede agregar elementos a la página sin tener que mover los elementos existentes para hacerlo. Una buena alternativa al flotador y los bordes con la posición absoluta, no debe depender de los elementos flotantes o del uso de bordes para hacer una posición similar. Aunque no es una opción nativa dentro del DIV, aquellos que están familiarizados con CSS saben que puede usar flotas para colocar elementos a la derecha o a la izquierda, lo que puede ser un poco erróneo e impredecible en algunos casos. Lo mismo es cierto para el uso de bordes para colocar los elementos. A veces es difícil prever los valores de margen exacto para colocar un elemento exacto sin dejar detrás del espacio innecesario. El uso de una posición absoluta puede ser una buena alternativa de “posicionamiento preciso” tanto para flotadores como para bordes.

Buena asistencia para el navegador La propiedad de la posición absoluta es ampliamente aceptada en todos los navegadores principales, por lo que generalmente puede confiar en que no romperá las cosas en otros navegadores inesperadamente. Las desventajas son algunas desventajas a considerar al usar la posición absoluta: riesgo de aislamiento porque los elementos colocados surgen absolutamente del flujo normal de documentos, puede ser difícil agregar elementos adicionales al lado. Se aislan de otros elementos en la página. Por ejemplo, normalmente en la división, si desea agregar un botón en un módulo de texto, simplemente puede agregar un módulo y vivirá automáticamente en el módulo de texto. Pero si el módulo de texto se ha colocado absolutamente, debe colocar el módulo del botón Absoluto y luego usar las propiedades superiores, inferiores, izquierdas y derecha para colocar el botón debajo del módulo de texto. Sin embargo, puede ser más fácil colocar una columna (el contenedor del módulo principal) para que todos los módulos en la columna puedan seguir el flujo normal de documentos (como colocar un grupo de módulos en lugar de uno).

También menos receptivo, debido a que los elementos ubicados salen absolutamente del flujo del documento, puede ser difícil hacer el posicionamiento para dispositivos móviles. De hecho, muchos desarrolladores evitan la posición: absoluta debido a los desafíos que vienen con 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 para posicionar la posición que se incorporan en el Builder Divi facilita el posicionamiento de los elementos de una manera absolutamente simple, haciendo clic en un punto de ubicación. Una vez que se ha seleccionado el punto de ubicación, puede usar los espacios verticales y horizontales para hacer ajustes de posición adicionales desde ese punto de ubicación. Por defecto, el punto de ubicación se establecerá en la parte superior izquierda. Por lo tanto, agregar espacios verticales y horizontales a esa ubicación agregará espacio adicional desde la parte superior e izquierda.
Desde la esquina superior derecha, el espacio vertical agregará espacio desde la parte superior, y el espacio horizontal agregará espacio a la derecha.
Desde la esquina inferior derecha, el espacio vertical agregará espacio desde la parte inferior, y el espacio horizontal agregará espacio a la derecha.

Desde la esquina inferior izquierda, el espacio vertical agregará espacio desde la parte inferior, y el espacio horizontal agregará espacio a la izquierda.

Hacer ajustes a elementos absolutos centrados cada vez que seleccione una opción de ubicación con una posición enfocada, DIV utiliza una combinación de propiedades CSS para garantizar que el elemento esté perfectamente enfocado, independientemente del tamaño. Por ejemplo, si Y0U selecciona la ubicación de la posición izquierda enfocada, la diva colocará el elemento de la siguiente manera: así es como se ve CSS en el backend. Posición: ¡Absoluto! Importante;

Arriba: 50%;

Abajo: auto;

Izquierda: 0px;

Derecha: Auto;

Transformación: traducido (-50%); La parte superior: 50% está allí para colocar la parte superior del artículo exactamente al 50% de la parte superior de su contenedor. Transformación: Traducido (-50%) está ahí para elevar el artículo exactamente la mitad de su altura. Esto le da un elemento perfectamente colocado, independientemente de la altura que pueda ser. Es importante saber si desea hacer ajustes adicionales (o compensación) a un elemento en una posición enfocada. No desea cometer el error de usar la opción de transformación sin conocer los valores ya utilizados. Por esta razón, sería mejor hacer ajustes más pequeños utilizando la propiedad de margen en la división en lugar de transformar la traducción, a menos que comprenda lo que está haciendo. Utilizando la opción de transformación de traducción para colocar varios elementos absolutos para la ubicación enfocada si comprende cómo usar Transform: Traducir, en realidad puede ser muy útil para compensar los elementos enfocados sin tener que conocer el ancho del artículo. Por ejemplo, suponga que coloca un módulo para centrarse tanto vertical como horizontalmente con una columna en el div. Se vería así.
Si le di al artículo una traducción de traducción de la siguiente manera, nada cambiará: transformar la traducción (y): -50%
Translación de transformación (x): -50%
Esto se debe al hecho de que Divic ya está haciendo esto automáticamente en Backend For. Y si usa la unidad de longitud porcentual, no debe conocer el ancho o la altura del módulo para hacer ajustes, porque el 100% es igual al ancho o 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 vertical y horizontal.
Luego use las opciones de traducción de transformación para ajustar la posición de los módulos de acuerdo con el porcentaje del ancho y la altura del módulo en consecuencia. Por ejemplo, otorgar un módulo para transformar el eje Y por valor de -100% elevará el módulo a la altura exacta del módulo. Si le da al módulo un valor del eje x del -100%, el módulo se moverá hacia la izquierda con el ancho exacto del módulo. Este puede ser un excelente WAT para combinar elementos que están absolutamente enfocados.
Ejemplo de caso de uso: los botones de posicionamiento absoluto para la misma altura Una aplicación práctica del uso de la posición absoluta en la división es darle a un botón una posición absoluta dentro de una columna, de modo que el botón permanezca en la parte inferior de la columna, incluso si La cantidad (o altura) del contenido anterior se puede modificar. Esta puede ser una excelente manera de mantener el diseño consistente cuando muestra elementos en su página, aquí es cómo hacerlo. Primero, agregue una fila con una columna a la sección. Luego agregue un módulo de propaganda a la columna.

Luego agregue un módulo de botón debajo del módulo de la 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 modo de propaganda y botón.
Luego acceda a la configuración de la fila y seleccione la opción de igualar las alturas de la columna. Esto asegurará que las columnas se ajustarán a la altura de la columna con la altura más alta (o el contenido más alto).

Ahora actualice el contenido del cuerpo de cada uno de los módulos de propaganda, de modo que la cantidad de contenido difiera con cada columna. Debe ver que el botón a continuación se moverá en la posición directamente debajo del módulo de la propaganda, haciendo que cada uno de los botones en una posición diferente dentro de la columna.

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

Posición: Absoluto

Ubicación: en el lado inferior izquierdo

Esto colocará cada uno de los botones absolutos 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 algunas superposiciones con el botón y el módulo de la propaganda en la columna izquierda. Para remediar esto, simplemente debemos crear un espacio real para el botón agregando algo de relleno en la columna, de la siguiente manera: forro: 50 px inferior

Ahora tiene tres elementos presentados con una colocación constante del botón para cada uno, incluso si se puede modificar la cantidad de contenido (o la altura de la propaganda).

Pensamientos finales Espero que esta publicación haya arrojado una luz sobre la propiedad de la posición absoluta y lo fuerte que se puede usar dentro del DIV. 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 al siguiente nivel. Espero tener noticias suyas en los comentarios. ¡Suerte!