Positionnement en CSS - Leonel Ngoya

Hey,
Ceci est mon premier article et je me suis dit pourquoi pas parler d'un sujet simple et aussi complexe quand on l'assimile pas bien. comme vous l'aurez lu, on parlera du positionnement en css et qui dit positionnement en css dit directement la propriété position: ...; donc oui l'article portera uniquement sur cette petite propriété.

Sans plus tarder nous allons commencer et pour ce fait j'ai créé un fichier index.html et style.css avec quelques éléments. Dans le html on a juste une div qui contient un header et lui contenant un bouton et après un paragraphe de 2000 mots environ ...

<body>
  <div class="container">
    <header class="header">
      <button>Click me !</button>
    </header>
  </div>
  <p>lorem ...</p>
</body>

et dans le css on a un petit reset et un peu de coloriage :)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 500px;
  background: green;
}

.header {
  background: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

Comme rendu nous avons donc un truc comme ça ( oui c'est très moche je sais )

Alors la première chose a retenir est que en css la propriété position peut prendre 5 valeurs à savoir :

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

Alors on va aller pas à pas et explorer chacun de ces cas, ne vous inquiétez pas !

position: static;

C'est la valeur la plus facile à comprendre car en fait tous les éléments que l'on crée ont par default cette valeur, donc c'est la valeur qu'a actuellement nos éléments créés ( div, header, ul, p ... )

position: relative;

Bon ... la ça devient un peu plus bizarre car si on met par exemple notre header en position: relative; comme ceci :

.header{
    position: relative;
    ...
}

on verra qu'il ne se passe rien, notre page reste intact et ceci sera pareil si on le fait avec les autres éléments. Mais la on commence a se dire " POURQUOI AVOIR DONC CRÉÉ CE POSITIONNEMENT SI IL EST PAREIL AU STATIC ??? " et bien ... ils ne sont pas pareil car ce positionnement et les 3 prochains qu'on verra donne accès a 4 autres propriétés qui permettent de déplacer notre élément et ces propriétés sont :

top:;
left:;
bottom:;
right:;

Qui veut dire respectivement : haut - gauche - bas - droite . Ceci veut tout simplement dire que maintenant nous pouvons déplacer notre header avec ces propriétés

.header {
    position: relative;
    top: 100px;
    left: 50px;
    ...
}

Vous voyez comment notre header s'est déplacé. Mais le position: relative ne sert pas juste à ça, il sera très utile quand on parlera du positionnement absolue

Nous pouvons donc dire que si les propriétés top - left - bottom - right ne sont pas utilisées alors le static et le relative ont PRESQUE le même role, car comme j'ai dit il sera utile avec le position: absolute. ***

position: absolute;

C'est ici que ça deviendra un peu complexe. Tout d'abord ce qu'on fera c'est enlever le code qu'on a mit sur le header ( seulement celui de la section précédente ) et ensuite on va ajouter un texte sur notre header ( dans le html )

...
     <header class="header">
        <p>Bonjour moi c'est LN</p>
        <button>Click me !</button>
      </header>
...

maintenant on va mettre position: absolute; sur notre bouton, comme ceci :

... button {
  position: absolute;
}

Et la c'est le chaos total, notre bouton a changé de place et de manière bizarre, il est venu se superposer sur notre texte. On se demande ce qu'il s'est réellement passé.

Quand un élément est en position: absolute; et même relative il sort du flux de l'écran mais pas de la même façon.

Cette image vous explique donc un peu le phénomène qui vient de se produire. Notre élément est sorti du flux de l'écran tout en 'supprimant' sa place ce qui le rend flottant. Hors avec le relative il sort du flux c'est vrai mais sa place reste conservé c'est pour ça que si a la place de absolute on mettait relative sur notre bouton ça n'allait rien changer ( au point de vue de l'oeil )

Donc notre bouton est sorti du flux de l'écran, mais c'est pas tout. Si vous n'avez pas oublie la propriété position nous donne accès a 4 nouvelles propriétés, essayons donc un truc. Nous allons mettre :

... button {
  position: absolute;
  bottom: 0;
}

Regardez en bas de votre écran et vous verrez votre bouton

Et la on se pose encore la meme question : " Qu'est ce qui s'est passé ? " et je vais vous répondre, " c'est de la magie ! hahaha " je blague bien-sur. En réalité comme son nom l'indique c'est un positionnement absolue donc il doit se positionner par rapport a quelque chose et dans ce cas il se positionne par rapport a notre fenêtre ( je n'ai pas dit par rapport au body mais bien la fenêtre ) c'est pour cette raison qu'elle est en bas de notre fenêtre et non en bas de notre body ( qui est encore plus bas ( à la fin de notre paragraphe ) ). C'est donc à ce moment qu'on se demande comment positionner notre élément par rapport a un élément que l'on veut et c'est a ce même moment que je vous demande de vous rappeler du position: relative; , c'est ici que son 2e role intervient. Mais avant je vais vous dire ce que le position: absolute; fait exactement : > Quand un élément est en position: absolute; il essaie d'abord de regarder si son parent est en position: relative/absolute si c'est pas le cas il va passer au parent de son parent et ensuite au parent du parent de son parent ... et s'il ne trouve pas toujours un élément en relative/absolute il se positionnera par rapport a la fenêtre. Ceci veut tout simplement dire que s'il trouve un élément en relative/absolute il va se positionner par rapport a celui la.

J'AI BIEN DIT ABSOLUTE ou RELATIVE

Dans notre cas donc, si on veut positionner notre bouton en bas de notre div verte on n'a qu'a la mettre en relative comme ceci :

.container {
  position: relative;
  height: 500px;
  background: green;
}

Et le tour est joué :)

La dernière chose qu'on peut aborder concernant le positionnement absolue ( oui ça fait déjà trop ) c'est : Il ne quitte pas seulement du flux de l'écran mais il perd aussi ses dimensions ( width, height ). Nous ne l'avons pas remarqué parcequ'on avait juste un petit bouton en absolute. Ce qu'on va donc faire c'est mettre notre header en position absolute comme ceci:

.header{
    position: absolute;
    ...
}

On remarque donc plusieurs chose : - Le bouton ne se positionne plus par rapport a la div verte mais maintenant a notre header et ca je l'ai dit ( quand un élément est en absolute il regarde d'abord si son parent est en relative/absolute pour se positionner par rapport a lui avant de passer au parent de son parent et ainsi de suite ) - Notre header a perdu ses dimensions :( et bien c'est une conséquence de ce positionnement mais il est vite remédiable et il peut même se faire de deux façon :

.header {
  position: absolute;
  width: 100%;
}

OU .header {
  position: absolute;
  left: 0;
  right: 0;
}

> Dans le premier cas on dit a l'élément de prendre 100% de taille disponible et dans le 2e on lui demande de partir a droite ( right: 0; ) et aussi de partir a gauche ( left: 0; ) ce qui fait en sorte qu'il s'étire, intuitif n'est-ce pas ? :)

Je crois qu'on a fait un tour de ce positionnement. C'est pas grave si vous comprenez pas d'un coup, avec un peu de pratique vous y verrez plus clairement.

position: fixed;

Pour cette section on va repartir sur le css qu'on avait au début de l'article :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 500px;
  background: green;
}

.header {
  position: relative;
  background: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

Ce qu'on fera maintenant c'est d'ajouter ce positionnement à notre bouton

button {
  position: fixed;
}

A première vue, on a le même comportement qu'avec le position: absolute genre il est sorti du flux de l'écran et se positionne par rapport au header qui est en relative , eh bah on se trompe. Essayez maintenant de scroller votre écran et la vous remarquerez un truc, le bouton reste en haut de l'écran, il reste FIXE et c'est la que je vais vous dire que :

Quand un élément est en position: fixed , il se positionnera TOUJOURS par rapport a notre fenêtre tout en restant fixe a la place qui lui a été attribué ( avec les : left - top - bottom - right ) . Sans oublier que lui aussi sort du flux de l'écran tout en supprimant sa position ( comme le position: absolute; )

Retenez bien que quand c'est en absolute il se positionne par rapport a la fenêtre mais si on scroll celle ci il va conserver son positionnement ce qui fera que l'élément scrollera aussi, mais quand c'est en fixed il se positionne par rapport a la fenêtre et quand on la scroll il met a jour son point de référence de tel manière qu'il soit toujours positionné par rapport a la fenêtre courante ( hors en absolute c'est juste par rapport a la première fenètre que l'on voit )

Ce positionnement est plus utilisé pour les navbar fixe que l'on verra sur certains sites mais aussi pour faire des overlay lors de la creation des boites modales.

Il y'a plus grand chose a dire sur ce positionnement, on va juste un peu update notre code, ce qui nous aidera pour la suite. En css on doit donc avoir ca :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 500px;
  background: green;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  background: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

Et si vous scrollez tout en bas le header reste fixe

position: sticky;

C'est le positionnement que je trouve assez fun :) alors vous devez juste comprendre :

Quand un element est en position: sticky; , il se comporte comme le position: fixed; mais uniquement quand il est toujours dans le cadre de son élément parent.

Je reformule un peu bien avec notre exemple :

Si je mets notre header en sticky, et que je scrolle mon écran, mon header sera fixe uniquement lorsque ma div verte sera toujours visible, donc quand ma div verte va disparaitre, elle partira avec lui.

Si c'est pas toujours compris on va pratiquer, dans notre css changeons le positionnement du header

.header {
  position: sticky;
  ...
}

Et si vous essayez vous verrez que ce que j'ai dit ne fonctionne pas, on a plutôt l'impression d'avoir affaire au position: static; et bien c'est pas faux il manque une dernière propriété a notre header , c'est le top: 0; pour lui demander de toujours rester en haut. Ce qui fait qu'on doit avoir ça :

.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

Et maintenant vous pouvez tester et admirer la beauté par vous même :) C'est tout pour ce positionnement.

position: inherit;

C'est vrai que j'ai dit qu'il y'avait juste 5 valeurs, je vous ai un peu menti :/ On a aussi celle ci, mais elle veut juste dire que :

Je prends le même positionnement que celui de mon élément parent. Donc si mon parent est en absolute, je suis aussi en absolute.

On est arrivé a la fin de cet article et j'espère qu'il vous a permis d'apprendre plus sur cette propriété CSS, si c'est le cas n'hésitez pas a partager sur vos réseaux et aussi a poser vos questions si vous n'avez pas très bien compris un point. On se dit donc à un prochain article, ciao ! C'était LN 👋

Article suivant : Flexbox partie 1