Deje de perder sus elementos en la pantalla al comprender cómo un objeto figura donde se supone que debe sentarse
La colocación de un elemento tiene que ver más con la posición del contenedor del elemento que con la propia. Para poder posicionarse a sí mismo, debe saber con qué div padre se va a posicionar en relación.
El siguiente código muestra cuatro divs anidados. .box-1a .box-3están centrados por display: flexy margin: autosolo. .box-4no se ha marginconfigurado y se encuentra en su posición predeterminada en el flujo de documentos.
La positionpropiedad no está configurada para todos los elementos.
body { display: flex;}.box-1,.box-2,.box-3 { display: flex; margin: auto;}
Para poder posicionarse, un elemento debe saber dos cosas:
- coordenadas para su
xy elyajuste de la posición de cualquieratop,right,bottom,left - a qué padre se va a posicionar en relación con
Al aplicar position: absoluteal .box-4elemento se elimina del normal document flow. Dado que sus coordenadas no están configuradas, simplemente permanece en la posición predeterminada que es su div principal de la esquina superior izquierda.
Al establecer top: 0y, left: 0el elemento debe saber qué padre considerará como punto de referencia. Para ser una referencia, el elemento debe posicionarse en la pantalla con position: relative. .box-4luego comienza a preguntar a sus divs padres si están posicionados. Al principio, pregunta .box-3y obtiene No, I am not positioned.como respuesta. Lo mismo ocurre con .box-2y luego .box-1, ya que todos lo han hecho position: unset.
Como .box-4no pudo encontrar un padre posicionado, se posiciona en relación con body. Ese elemento siempre está posicionado en la pantalla:
Si nos ponemos position: relativeen .box-1, cuando lo .box-4pregunte: Are you positioned?obtiene Yes I am.como respuesta. Y luego se .box-4colocará en relación con .box-1:
Lo mismo ocurre con .box-2y .box-3.
El elemento absolutamente posicionado se posicionará en relación con el antepasado posicionado más cercano.
Tan pronto como encuentra un antepasado posicionado, la posición de los elementos por encima de ese ya no es relevante. Las siguientes imágenes muestran el diseño al configurar position: relativeen .box-2 y .box-3, respectivamente:
También puede encontrar una explicación en video en Code Sketch Channel ?.
¡Gracias por leer! ✌️
Publicado originalmente en marina-ferreira.github.io.
