Comment comprendre CSS Position Absolute une fois pour toutes

Arrêtez de perdre vos éléments à l'écran en comprenant comment un objet figure là où il est censé se trouver

Le positionnement d'un élément concerne absolument plus la position du conteneur de l'élément que la sienne propre. Pour pouvoir se positionner, il doit savoir sur quelle division parent il va se positionner.

Le code ci-dessous montre quatre divs imbriqués. .box-1à .box-3sont centrés par display: flexet margin: autoseulement. .box-4n'a pas margindéfini, et il se trouve dans sa position par défaut dans le flux de documents.

La positionpropriété n'est pas définie pour tous les éléments.

body { display: flex;}
.box-1,.box-2,.box-3 { display: flex; margin: auto;}

Pour pouvoir se positionner, un élément doit connaître deux choses:

  • Les coordonnées de son xet de yconsigne de position soit par top, right, bottom,left
  • à quel parent il va se positionner par rapport à

Lors de l'application position: absoluteà .box-4l'élément est supprimé du normal document flow. Comme ses coordonnées ne sont pas définies, il reste simplement à la position par défaut qui est son div parent du coin supérieur gauche.

En définissant top: 0, left: 0l'élément doit alors savoir quel parent il considérera comme point de référence. Pour être une référence, l'élément doit être positionné sur l'écran avec position: relative. .box-4puis commence à demander à ses divs parents s'ils sont positionnés. Au début, il demande .box-3et obtient No, I am not positioned.une réponse. Il en va de même pour .box-2et puis .box-1, puisque tous l'ont fait position: unset.

Comme il .box-4n'a pas été possible de trouver un parent positionné, il se positionne par rapport au body. Cet élément est toujours positionné sur l'écran:

Si nous nous fixons position: relativeà .box-1, quand nous le demandons .box-4: Are you positioned?cela devient Yes I am.une réponse. Et puis .box-4sera positionné par rapport à .box-1:

Il en va de même pour .box-2et .box-3.

L'élément positionné de manière absolue se positionnera par rapport à l'ancêtre positionné le plus proche.

Dès qu'il trouve un ancêtre positionné, la position des éléments au dessus de celui-ci n'est plus pertinente. Les images ci-dessous montrent la disposition lors du réglage position: relativesur .box-2 et .box-3, respectivement:

Vous pouvez également trouver une explication vidéo sur Code Sketch Channel?.

Merci d'avoir lu! ✌️

Publié à l'origine sur marina-ferreira.github.io.