DEVENIR-WEBMASTER.COM Log In
 21
close

Le positionnement dans le flux d'un élément HTML

Visiter ma chaine Youtube

# Principe close

Si vous ne maîtrisez pas le positionnement CSS alors vous ne maîtrisez pas les CSS. C'est ici que la différence se fait.

Un module spécifique du navigateur s'occupe d'agencer les boîtes sur l'écran. C'est le moteur de rendu.

Le moteur de rendu parcourt l'arbre du document dans le but d'agencer sur l'écran les boîtes de chaque élément HTML.

Chaque fois que le moteur de rendu doit placer une boîte sur l'écran il a grossièrement deux solutions :

La première solution est de placer la nouvelle boîte derrière celle qu'il vient de mettre en place. Le moteur la place soit à côté soit sur une nouvelle ligne, peu importe, ce sera surtout sans chevauchement. C'est ce qui est fait par défaut. Dans ce cas on dit que la boîte est dans le flux.

La deuxième solution est de placer la nouvelle boîte en suivant des déclarations de positionnement spécifiques sans tenir compte de la boîte qu'il vient de mettre en place. Dans ce cas on parle de positionnement en dehors du flux.

Ci dessous un exemple de trois boîtes frères placées dans le flux.

Trois boîtes dans le flux

Ci dessous le second frère est placé hors du flux.

Une boîte hors du flux

# Démo close

Dans cette démo construite avec une media query vous pouvez passer d'une situation à l'autre.

Notez bien que lorsque le second frère sort du flux le troisième se positionne derrière le premier comme si le second n'existait pas.