Positionnement en CSS
Published: 2022-08-02 10:39:38

Bonjour,
ceci est mon premier article 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 ...

```html
<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 :)
```css
* {
  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 )
![Capture d’écran du 2022-07-31 01-24-21.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2001-24-21.png)
Alors la première chose a retenir est que en css la propriété `position` peut prendre 5 valeurs à savoir : 

```css
    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 :

```css
.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 : 

```css
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
```css
.header {
    position: relative;
    top: 100px;
    left: 50px;
    ...
}
```
![Capture d’écran du 2022-07-31 01-25-18.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2001-25-18.png)
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 )*

```css
...
     <header class="header">
        <p>Bonjour moi c'est LN</p>
        <button>Click me !</button>
      </header>
...
```
![Capture d’écran du 2022-07-31 01-32-28.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2001-32-28.png)
maintenant on va mettre `position: absolute;` sur notre bouton, comme ceci :

```css
...
button{
    position: absolute;
}
```
![Capture d’écran du 2022-07-31 01-44-54.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2001-44-54.png)

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é. <br>
> 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.
![1_pe9E2kzrX48Wwn_0wKklmw.png](/storage/images/july2022/1_pe9E2kzrX48Wwn_0wKklmw.png)

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 :

```css
...
button {
  position: absolute;
  bottom: 0;
}
```
Regardez en bas de votre écran et vous verrez votre bouton
![Capture d’écran du 2022-07-31 01-51-06.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2001-51-06.png)
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. <br>
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 ) ). <br>
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 :
```css
.container {
  position: relative;
  height: 500px;
  background: green;
}
```
Et le tour est joué :)
![Capture d’écran du 2022-07-31 02-14-37.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2002-14-37.png)

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: 

```css
.header{
    position: absolute;
    ...
}
```
![Capture d’écran du 2022-07-31 02-25-08.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2002-25-08.png)
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 :

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

OU

.header{
    position: absolute;
    left: 0;
    right: 0;
}
```
![Capture d’écran du 2022-07-31 02-36-41.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2002-36-41.png)
> 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 :
```css
* {
  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;
}
```

![Capture d’écran du 2022-07-31 02-42-28.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2002-42-28.png)
Ce qu'on fera maintenant c'est d'ajouter ce positionnement à notre bouton

```css
button {
  position: fixed;
}
```
![Capture d’écran du 2022-07-31 09-19-04.png](/storage/images/july2022/capture-decran-du-2022-07-31-09-19-041.png)
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 :

```css
* {
  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 
![Capture d’écran du 2022-07-31 09-41-50.png](/storage/images/july2022/Capture%20d’écran%20du%202022-07-31%2009-41-50.png)
***

### 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*

```css
.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 :

```css
.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](https://leonelngoya.com) 👋