Comprensión y uso de la posición relativa en Div

La propiedad relativa de la posición es probablemente la más misteriosa de los tipos de posición. Sin embargo, una vez que entendemos cómo funciona, podemos usarlo para nuestra ventaja cuando diseñamos un sitio en Div. Lo que descubrimos puede sorprenderte. En esta publicación cubriremos:
Una presentación general de los cuatro tipos de posicionamiento de div.
Cómo la posición relativa “posición” un elemento en el div
5 razones para usar una posición relativa en la división
Posición relativa vs. margen
Posición relativa vs. Transformación traducida
¡Échale un vistazo! Presentación general de los cuatro tipos de posicionamiento de div. La posición relativa es uno de los cuatro tipos de posiciones 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)? En DIV, cuando elegimos la posición predeterminada para un módulo, elegimos 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. Podemos 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. Podemos 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 ejecutamos en 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 relativa “posiciona” un elemento en la división como se menciona en la presentació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 (el código HTML en la página). La verdadera diferencia es que, una vez que atribuimos un elemento con la posición relativa, ahora tiene nuevas opciones disponibles para el posicionamiento del artículo. Estas opciones incluyen las propiedades superior, inferior, izquierda y derecha, así como la propiedad del índice Z. En DIV, 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.
El uso de compensación con posición relativa Los valores de compensación y desplazamiento funcionarán juntos para colocar nuestro elemento donde quiera 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 25px y un desplazamiento horizontal de 25px. Observe cómo los valores de desplazamiento alejarán el elemento del origen del desplazamiento horizontal y / o vertical.
Aquí está el mismo módulo que las mismas compensaciones, pero con un origen del desplazamiento en la parte superior derecha. Aquí es el mismo módulo que las mismas compensaciones y un origen del desplazamiento inferior derecho.

Y aquí está el mismo módulo con las mismas compensaciones y un origen del desplazamiento en la parte inferior izquierda.

Sin sorpresas de espacio con el posicionamiento relativo, el espacio real del elemento permanece en su lugar original después de que el elemento se mueve utilizando las compensaciones (arriba, izquierda, derecha). La nueva posición del elemento no se mueve y no afecta ninguna distancia entre el resto de los elementos en la página. Básicamente, juega en los otros elementos como un espíritu que ha dejado su cuerpo.

Razones para usar la posición relativa # 1 para jugar un contenedor principal para elementos posicionados absolutamente esta es probablemente la aplicación más popular de la posición relativa. Debido a que cualquier elemento absolutamente posicionado es relativo al ancestro 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”). Esto mantiene el flujo del documento en su lugar (como estático) y nos permite elegir un contenedor para elementos absolutos.

# 2 para mover elementos sin afectar los otros elementos en la página. Con la posición relativa, podemos usar una compensación para empujar los elementos a la alineación, sin afectar otros elementos. Y con Div, podemos aprovechar la interfaz de la interfaz deslizante para colocar los elementos visuales en tiempo real. # 3 Para usar el índice Z para superponer otros elementos de forma predeterminada, los elementos estáticos no se pueden reordenar en el eje Z a menos que se proporcione la posición relativa. Una vez en la posición relativa, el elemento permanecerá colocado en el flujo normal del documento. Solo ahora, tenemos la capacidad de aprovechar la indexación de Z para colocar elementos en un determinado orden al superponerse. Sin embargo, con un margen negativo, tanto el contenido como su espacio original se mueven. Por ejemplo, si agregamos un margen superior negativo a una fila en la división, de modo que la fila se superpone sobre ella, todas las filas / contenido se moverán con ella. Esto deja un poco de miseria para limpiar, lo que podría evitarse utilizando una compensación de posición relativa. Aquí hay una ilustración de lo que sucede cuando usamos un margen superior negativo para mover un módulo hacia arriba. Observe cómo se traen el resto de los elementos a continuación.

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


Aunque a menudo hemos usado un margen negativo para posicionar elementos en la división, probablemente no sea una buena idea si podemos usar el posicionamiento relativo. El margen se refiere al módulo de caja del elemento, por lo que realmente está destinado a agregar el espacio dentro y alrededor del elemento en sí, no para el posicionamiento del elemento ofrecido desde el contenedor principal, sino con el posicionamiento relativo. Posición relativa vs. La transformación traducida La posición relativa es de hecho similar al uso de elementos transformados en elementos de posición en una página. Ambos mueven el elemento dejando el espacio real en su lugar original y sin afectar los otros elementos en la página. La traducción es mejor para la animación y las transiciones (como los efectos del ratón), sin embargo, parece que la traducción es la mejor para la animación y las transiciones (como los efectos de ciervo), porque ofrece transiciones más rápidas y más fáciles. El uso de la parte superior compensada, la parte inferior, izquierda y derecha para animar o pasar un elemento relativo podría estar más agitado y podría hacer que nuestro navegador funcione más duro de lo que necesita. Las unidades de longitud relativa responden de manera diferente si usamos unidades de longitud relativa (como% o VW) para el diseño receptivo, funcionarán de manera diferente con la posición relativa y la transformación. Un módulo Divi con una posición relativa y una brecha horizontal del 50% moverá el módulo en el horizontal con una cantidad igual al 50% del ancho (o columna) padre. Una transformación de diván (eje x) del 50% moverá el Módulo horizontalmente con una cantidad igual al 50% del ancho del módulo en sí.

Combinando la posición relativa y transformando la traducción en elementos centrales como acabamos de cubrir, la posición relativa es relativa a los padres, y la propiedad de traducción de traducción es relativa al elemento mismo. Por esta razón, podemos usar ambos en combinación para posicionar los elementos exactamente como queramos. Incluso podemos usar esta técnica para centrar los elementos en su contenedor. Por ejemplo, podemos usar la posición de desplazamiento horizontal relativo para colocar el módulo al derecho exactamente el 50% de la columna vertebral. Luego use la propiedad de traducción para mover el módulo del 50% (desde el ancho) a la izquierda. Esto asegurará que el módulo permanezca en el centro de la columna, independientemente del ancho del módulo.

Pensamientos finales Si eres como yo antes de escribir este artículo, probablemente no entendiste ni usaste la posición relativa. Quizás el aspecto más sorprendente de esta posición relativa es la forma en que afecta (o no tiene impacto) el resto del diseño en la página. No solo funciona en conjunto con elementos absolutos, sino que funciona bien con la transformación en elementos de posición en el lugar perfecto. ¿Cuál fue su experiencia con el tipo de posición relativa? Espero tener noticias suyas en los comentarios. ¡Suerte!