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-1
a .box-3
están centrados por display: flex
y margin: auto
solo. .box-4
no se ha margin
configurado y se encuentra en su posición predeterminada en el flujo de documentos.
La position
propiedad 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
x
y ely
ajuste de la posición de cualquieratop
,right
,bottom
,left
- a qué padre se va a posicionar en relación con
Al aplicar position: absolute
al .box-4
elemento 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: 0
y, left: 0
el 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-4
luego comienza a preguntar a sus divs padres si están posicionados. Al principio, pregunta .box-3
y obtiene No, I am not positioned.
como respuesta. Lo mismo ocurre con .box-2
y luego .box-1
, ya que todos lo han hecho position: unset
.
Como .box-4
no pudo encontrar un padre posicionado, se posiciona en relación con body
. Ese elemento siempre está posicionado en la pantalla:

Si nos ponemos position: relative
en .box-1
, cuando lo .box-4
pregunte: Are you positioned?
obtiene Yes I am.
como respuesta. Y luego se .box-4
colocará en relación con .box-1
:

Lo mismo ocurre con .box-2
y .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: relative
en .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.
