Leonel Ngoya https://www.lndev.me Personal blog of Leonel Ngoya ( LN ) Tue, 28 Apr 2026 19:04:08 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Leonel Ngoya https://www.lndev.me/favicon.ico https://www.lndev.me All rights reserved 2026 <![CDATA[Créer un curseur personnalisé]]> https://www.lndev.me/articles/creer-un-curseur-personnalise https://www.lndev.me/articles/creer-un-curseur-personnalise Sun, 14 Aug 2022 00:00:00 GMT

Hey,
Avant de commencer on doit tous savoir ce que c'est qu'un curseur personnalisé . Les passionnés du Creative Development ou mêmes ceux qui regardent souvent les sites de AWWWARDS doivent avoir une petite idée de ce que c'est, mais voici un exemple et ce qu'on fera dans cet article.

C' est un effet plutot sympa que vous pouvez trouver sur certain site. A première vu on se demande comment on va le faire et on peut croire que c' est un peu complexe. Je vais vous rassurer que c'est pas le cas. Pour réaliser ceci nous aurons besoin de trois fichier : HTML - CSS - JS . Sans plus tarder, lançons nous dans le code !

Le HTML

Après la création de vos fichiers ( index.html - style.css - app.js ) tous dans un même dossier, nous allons nous rendre dans le fichier html et ecrire ceci :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="style.css" rel="stylesheet" />
    <script src="app.js" defer></script>
    <title>Test</title>
  </head>
  <body>
    <div id="mouse"></div>
  </body>
</html>

Je crois que la c' est la partie la plus facile, car on a juste une seule div dans notre body et c' est celle ci qui nous servira de curseur. Et oui, côté HTML on est okay, plus rien à faire !

Le CSS

Maintenant on se rend dans le style.css et ce qu' on va faire premièrement c' est donner un peu de style a notre div

#mouse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: none;
  border-radius: 50%;
  border: 2px solid #000;
  transform: translate(-50%, -50%);
}

Et au centre de notre de notre écran nous devrions avoir ceci :

le transform: translate(-50%, -50%); nous permettra de centrer notre curseur par rapport à la div

Ceux ( ou celles ) qui ne comprennent pas pourquoi c' est au centre peuvent aller consulter mon article sur le Positionnement en CSS ou j' explique plus en detail ce genre de comportement.

Donc pour l' instant on a rien de compliqué, mais si vous avez remarqué on a toujours notre curseur qui apparait sur l' écran et il est complètement indépendant de notre div ( #mouse ) et on se demande bien pourquoi mais aussi comment faire que notre curseur dépende de notre div. Et c' est maintenant que Monsieur JavaScript intervient.

Le JavaScript

Un tour dans le fichier app.js et la première chose que nous allons faire c' est de selectionner notre div :

const mouse = document.querySelector('#mouse')

Maintenant, grâce à addEventListener nous allons pouvoir rattacher l' écoute d' un évènement a notre div, dans notre cas nous utiliserons mousemove ( en gros il se déclenche chaque fois que le curseur bouge ) . Donc dans notre code on doit avoir quelque chose comme ca :

const mouse = document.querySelector('#mouse')
mouse.addEventListener('mousemove', (e) => {})

L' objectif présentement est de pouvoir changer la position de notre div a chaque fois que l' on bouge le curseur . Les valeurs des positions que nous devons attribuer a la div doivent etre les mêmes qu' occupent le curseur a cet instant et ceci fera donc en sorte que la div et le curseur se trouve au même endroit au même instant.

Et la on se dit : " Okay LN, c' est bien beau tout ça mais comment realiser ce que tu viens de dire ? " Et bien ... JavaScript a des propriétés pour pouvoir détecter la valeur de la position ( en pixel ( px ) ) sur l' axe des X et des Y du curseur. On a donc : pageX et pageY

Le but sera donc d' affecter ces valeurs a top: ; et left: ; de notre div, ce qui est un jeu d' enfant :

const mouse = document.querySelector("#mouse");
mouse.addEventListener("mousemove", (e) => {
  mouse.style.top = e.pageY + "px";
  mouse.style.left = e.pageX + "px";
});

Je sais pas si vous vous êtes rendus compte mais le résultat est un peu "bizzare", regardez bien :

On remarque que le curseur et la div ne sont pas vraiment synchro ce qui fait que la div se déplace uniquement quand le cursur est sur elle, mais si on essaie de VITE déplacer le curseur, les deux ne sont plus ensemble

Essayez de déviner où se trouve le problème :) ... Il est la :

quand on a fait le addEventListener on lui a rattache la div ( mouse.addEventListener ) et c' est ca la raison, avec ceci la position de la div change uniquement quand la souris est sur elle

Vous vous demandez alors comment faire pour y remédier, et bien c' est très facile, a la place de rattacher la div on rattachera l' element window ca fait qu' on doit avoir un code comme ceci :

const mouse = document.querySelector('#mouse')
window.addEventListener('mousemove', (e) => {
  mouse.style.top = e.pageY + 'px'
  mouse.style.left = e.pageX + 'px'
})

Et le résultat est impeccable :)

La div suit toujours le curseur peut importe ou il va ! Maintenant il est aussi possible d' enlever le curseur par defaut et de ne laisser que la div ( comme dans la demo a l' intro ) et ceci se fera en CSS, nous devons juste ajouter ceci au debut de notre code :

html {
  cursor: none;
}

Et on a ca :

On est arrivé a la fin de cet article et j'espère qu' il vous a plu, 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 👋

]]> leonelngoya@gmail.com (Leonel Ngoya) <![CDATA[Flexbox partie 1]]> https://www.lndev.me/articles/flexbox-partie-1 https://www.lndev.me/articles/flexbox-partie-1 Mon, 01 Aug 2022 00:00:00 GMT

Hey,
Alors, c'est quoi les FlexBox ? Déjà pour ceux qui ne le savent pas, avant ( bien avant ) pour positionner nos éléments on utlisait les float ( je vais pas revenir dessus mais si vous voulez en savoir plus vous pouvez regarder ICI ) mais celui ci avait des inconvénients, une majeure était que un élément en float sort du flux normal de l'écran ( exactement comme on a vu dans les positions ) ce qui n'était pas toujours pratique et donnait des résultats désagréable des fois. C'est alors comme ca que flexbox intervient. En une phrase nous pouvons dire que :

flexbox c'est un ensemble de propriété qui a pour but principal de pouvoir piloter des éléments enfants depuis l'élément parent.

A dire comme ca c'est assez flou mais dans cette série d'artclie ( oui il y'en aura plusieurs ) nous allons essayer d'analyser pas a pas ce systeme.

Alors pour cet article on commencera avec un fichier index.html contenant :

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
</div>

Et un fichier style.css contenant :

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

.container {
}

.item {
  width: 150px;
  height: 150px;
}

.item-1 {
  background-color: #f00;
}

.item-2 {
  background-color: #0f0;
}

.item-3 {
  background-color: #00f;
}

.item-4 {
  background-color: #ff0;
}

.item-5 {
  background-color: #0ff;
}

Pour le moment rien de compliquer, et comme rendu nous avons ceci :

Flexbox en réalité c'est un systeme de display ; donc pour avoir acces aux propriétés qu'il nous offre, nous devant changer notre display , mais le display de quel élément ? Bien évidement de l'élément parent car c'est lui qui va piloter ses enfants. Alors pour commencer on va changer le display de notre div container en display: flex; et oui c'est pas display: flexbox; comme on l'aurait cru

.container{
  display: flex;
}

Le résultat est plutot étonnant, on dirait de la magie et bien sur on se demamde ce qu'il s'est passé. Pour comprendre ceci nous allons évoquer une propriété des flexbox et vous devez bien la comprendre car ca sera primordial pour la suite.

flex-direction: ;

C'est une propriété tres importante dans flexbox , elle permet de définir comment seront alignés nos éléments enfants. Ce que vous devez comprendre actuellement c'est qu'elle peut prendre 4 valeurs a savoir :

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

Les plus intélligents auront devinés que la valeur par éfautd c'est flex-direction: row; ce qui veut dire que Mes enfants vont s'aligner sous forme de ligne et row-reverse veut juste dire que ca sera du sens contraire ( les elements vont s'inverser ) .

flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

Le résultat respectif de ces trois valeurs donne ca :

*** C'est bien beau mais c'est pas vraiment la chose IMPORTANTE que je voulez que vous reteniez sur cette propriété. Faut savoir que le display: flex; crée un repère ( oui comme en maths ) ayant deux axes appellé le mainAxis Alignment pour l'axe principal et le crossAxis Alignment pour le second.

C'est toujours flou et vous ne voyez pas le rapport. Alors, Il est la :

La position de l'axe principal ( mainAxis Alignment ) et du second axe ( crossAxis Alignment ) dépend de la valeur du flex-direction

Si le flex-direction: row / row-reserve ; ca sera comme ca :

Si le flex-direction: column / column-reserve ; ca sera comme ca :

Ce que je viens de vous dire est TRES IMPORTANT pour la suite et prennez vraiment la peine de bien comprendre ca pour ne pas avoir les problemes dans le futur.

Je vous laisse avec l'eau dans la bouche en attendant la suite de cette série.

On est arrivé a la fin de cet article partie et j'espère qu'il vous a plu, 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 au prochain article, ciao ! C'était LN 👋

]]> leonelngoya@gmail.com (Leonel Ngoya) <![CDATA[Flexbox partie 2]]> https://www.lndev.me/articles/flexbox-partie-2 https://www.lndev.me/articles/flexbox-partie-2 Mon, 13 May 2024 00:00:00 GMT

Hey,
Ça fait un bail ( plus d'un an 😬 ), alors pour mon retour j'ai décidé de continuer la série sur FlexBox parceque oui, il y'a déjà eu un premier article sur ce sujet que vous pouvez consulter ICI, article que je vous conseille de consulter pour bien comprendre la suite de la série FlexBox.

Dans l'article précédent on a parlé de la propriété display: flex; qui permet de transformer un élément en conteneur flex et aussi de flex-direction qui permet de définir comment les éléments enfants vont s'aligner mais sutout, je vous ai aussi parlé de deux axes mainAxis Alignment et crossAxis Alignment qui sont très importants.

Dans cette article on va voir deux autres propriétés qui sont justify-content et align-items, elles permettent de controler l'alignement des éléments enfants dans le conteneur flex.

Reprenons nos fichiers, on a un index.html contenant :

<div class="container">
  <div class="item item-1" style="background-color: #f00;"></div>
  <div class="item item-2" style="background-color: #0f0;"></div>
  <div class="item item-3" style="background-color: #00f;"></div>
  <div class="item item-4" style="background-color: #ff0;"></div>
  <div class="item item-5" style="background-color: #0ff;"></div>
</div>

et style.css contenant :

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

.container {
  height: 700px;
  display: flex;
  flex-direction: row; /* qui est la valeur par défaut */
}

.item {
  width: 100px;
  height: 100px;
}

Ce qu'on va faire c'est de jouer avec les propriétés de justify-content pour voir son effet sur les éléments enfants.
Avant, faut savoir que justify-content peut plusieurs valeurs mais les plus courantes sont :

  • flex-start ( qui est la valeur par défaut )
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
.container {
  height: 700px;
  display: flex;
  flex-direction: row; /* qui est la valeur par défaut */
  justify-content: flex-end;
}

Ce qu'on a fait c'est d'attribuer la valeur flex-end à la propriété justify-content et comme nous le voyons sur l'image ci-dessous, les éléments enfants sont alignés à l'extrémité droite du conteneur.

Après ceci on peut se dire automatiquement que flex-end aligne les éléments à l'extrémité droite, flex-start aligne les éléments à l'extrémité gauche et center aligne les éléments au centre.
Et c'est la où on se trompe,
J'ai parlé dans l'article précédent des axes mainAxis Alignment et crossAxis Alignment et c'est ici que ca devient important.
Vous devez savoir que :

justify-content agit sur l'axe principal ( mainAxis Alignment )

Donc techniquement,

align-items agit sur l'axe secondaire ( crossAxis Alignment )

Sauf toute fois oublier que :

Le sens de l'axe principal et de l'axe secondaire dépend de la valeur de flex-direction

Si c'est flou alors on va faire un petit rappel et aussi un petite correction de la partie 1 pour bien expliquer ceci une fois pour toute.

Ceci est un schéma qui montre comment les axes sont positionnés en fonction de la valeur de flex-direction si vous ne devez retenir qu'une seule chose de cet article c'est bien ca.

Avec ca, on peut revenir sur notre code et changer la valeur de flex-direction pour voir comment les éléments vont s'aligner.

.container {
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

Comme vous le voyez sur l'image ci-dessus, les éléments sont alignés en bas du conteneur et c'est parce que la valeur de flex-direction est column et donc l'axe principal est l'axe vertical.
et vu qu'on a mi flex-end comme valeur de justify-content les éléments sont alignés en bas ( l'extrémité de l'axe principal ).

Je pense que là maintenant ça commence à être clair pour vous,

Je vous conseille de toujours vous référer au schéma que je vous ai montré pour bien comprendre comment les éléments vont s'aligner.

Revenons donc sur notre code et voyons comment les autres valeurs de justify-content à savoir, space-between, space-around et space-evenly vont agir sur les éléments enfants car on a déjà vu flex-start, flex-end et center.

  • space-between : Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux tout en touchant les extrémités du conteneur.
.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
  • space-around : Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux et aussi un espace aux extrémités qui est la moitié de l'espace entre les éléments.
.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
  • space-evenly : Les éléments sont répartis de manière égale sur l'axe principal avec un espace entre eux et aussi un espace aux extrémités qui est égale à l'espace entre les éléments.
.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

Maintenant on va voir la propriété align-items qui permet de controler l'alignement des éléments enfants sur l'axe secondaire ( crossAxis Alignment ).
Je pense que vous avez déjà compris comment ca marche ( n'oubliez pas de toujours vous référer au schéma que je vous ai montré ) donc on va directement voir les valeurs de align-items qui sont :

  • flex-start
  • flex-end
  • center
  • stretch ( qui est la valeur par défaut )
  • baseline

On va comment par :

  • stretch : Les éléments enfants vont s'étirer pour toucher les extrémités du conteneur.

Cela est un comportement qu'actuellement qu'on voit pas actuellement car j'ai défini une hauteur fixe de 100px pour les éléments enfants.
ce qu'on va faire c'est de retirer la hauteur des éléments enfants pour voir comment stretch va agir.

.item {
  width: 100px;
  /* height: 100px; */
}

Comme vous le voyez sur l'image ci-dessus, les éléments enfants s'étirent pour toucher les extrémités du conteneur.

on va remettre la hauteur des éléments enfants et continuer,

  • flex-start : Les éléments enfants sont alignés à l'extrémité du conteneur, il y'a pas de différence avec justify-content: flex-start; si ce n'est que justify-content agit sur l'axe principal et align-items agit sur l'axe secondaire.

  • flex-end : Les éléments enfants sont alignés à l'extrémité opposée du conteneur, il y'a pas de différence avec justify-content: flex-end; si ce n'est que justify-content agit sur l'axe principal et align-items agit sur l'axe secondaire.

  • center : Les éléments enfants sont alignés au centre du conteneur, il y'a pas de différence avec justify-content: center; si ce n'est que justify-content agit sur l'axe principal et align-items agit sur l'axe secondaire.

  • baseline : Les éléments enfants sont alignés sur la ligne de base du conteneur, c'est un peu compliqué à expliquer mais c'est comme si les éléments étaient alignés sur une ligne imaginaire qui passe par la base des éléments.

Pour mieux explique cela on va donner des hauteurs différentes à 2 de nos éléments enfants.

.container {
  height: 700px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.item {
  width: 100px;
  height: 100px;
}

.item-1 {
  height: 200px;
}

.item-3 {
  height: 300px;
}

Comme vous le voyez sur l'image ci-dessus, les éléments enfants sont alignés sur une ligne imaginaire qui passe par la base des éléments.
Je peux vous rassurer que c'est une valeur que vous n'utiliserez pas tous les jours mais c'est bien de la connaitre.

Avant, de vous quitter je vous rappelle de toujours vous référer au schéma que je vous ai montré pour bien comprendre comment les éléments vont s'aligner.

On est arrivé a la fin de cet article et j'espère qu'il vous a plu, 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 au prochain article, ciao ! C'était LN 👋

]]> leonelngoya@gmail.com (Leonel Ngoya) <![CDATA[Grid Template Areas]]> https://www.lndev.me/articles/grid-template-areas https://www.lndev.me/articles/grid-template-areas Mon, 20 May 2024 00:00:00 GMT

Hey,
Dans cet article, nous allons voir comment utiliser la propriété grid-template-areas pour créer des mises en page complexes. Cette propriété est l'une des plus puissantes de CSS Grid Layout et elle permet de définir des zones nommées dans une grille. Ces zones peuvent ensuite être utilisées pour positionner les éléments enfants de la grille.

Dans mon entourage, beaucoup de personnes évitent d'utiliser CSS Grid ( moi y compris ) parce que c'est plus ou moins compliqué mais surtout parce que les Flexbox sont plus faciles à comprendre et ça fait totalement le travail. Mais il y a des cas où CSS Grid est plus approprié et c'est le cas des mises en page complexes.

Pour commencer, je vais vous montrer une Bento Grid ( que vous pouvez retrouver ICI ) et nous allons voir comment nous aurions procédé pour la réaliser avec Flexbox pour ensuite montrer la facilité avec laquelle nous pouvons le faire avec CSS Grid notamment avec la propriété grid-template-areas.

Alors, pour réaliser cette Bento Grid avec Flexbox on peut procéder comme suit :

Où chaque couleur répresente une div, en html on devrait donc avoir quelque chose comme ça :

<div>
  <div>
    <div>A</div>
    <div>
      <div>B</div>
      <div>
        <div>C</div>
        <div>D</div>
      </div>
    </div>
  </div>
  <div>
    <div>E</div>
    <div>F</div>
  </div>
</div>

Nous remarquons donc que pour une simple grille de 3 lignes et 3 colones nous avons déjà une structure html assez complexe ce qui impliquera beaucoup de display: flex et flex-direction pour arriver à un résultat satisfaisant.

Maintenant, prenons la même grille et voyons comment nous pouvons la réaliser avec CSS Grid et la propriété grid-template-areas.
Quand vous voulez utiliser cette méthode, ce que je vous conseille premièrement c'est de dessiner votre grille sur une feuille de papier ou n'importe quel outil de dessin ( comme FigJam ), pour mieux visualiser les zones et ensuite vous pourrez les nommer.
Dans notre cas, nous avons donc :

Je sais pas si vous l'avez remarqué mais la nommenclature n'est pas faite par hasard, le nom que vous assosiez à une zone doit représenter le contenu de cette zone, ce qui fait en sorte qu'on peut se retrouver avec 2 ou plusieurs zones avec le même nom.

C'est le moment où vous me dites, okay LN c'est bien tout ça mais comment matérialiser en HTML / CSS ?
Commençons par le HTML :

<div class="grid">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>

Ce n'est pas un rêve, contrairement à Flexbox, avec l'utilisation de grid-template-areas nous avons une structure html très simple, pas d'imbrication et c'est ce qui fait sa force.
En code CSS, nous aurons :

.grid {
  display: grid;
  grid-template-areas:
    'A B B'
    'A C D'
    'E E F';
  gap: 10px;
  height: 100vh; /* Pour la hauteur de la grille */
}

.A {
  grid-area: A;
}

.B {
  grid-area: B;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}

Ce qui se passe ici c'est que nous avons défini les zones de notre grille avec grid-template-areas et ensuite nous avons associé chaque div à une zone avec grid-area. 

grid-template-areas:
  'A B B'
  'A C D'
  'E E F';

Cette partie représente exactement la grille que nous avons dessiné, chaque ligne représente une ligne de la grille et chaque mot représente une zone de la grille.

Et rien qu'avec ça nous aurons notre résultat final ressemblant à :

J'ai eu à faire une Vidéo Youtube sur ce sujet, je vous invite à la regarder pour mieux comprendre si vous avez toujours des zones d'ombre.

On est arrivé a la fin de cet article et j'espère qu'il vous a plu, 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 au prochain article, ciao ! C'était LN 👋

]]> leonelngoya@gmail.com (Leonel Ngoya) <![CDATA[Positionnement en CSS]]> https://www.lndev.me/articles/positionnement-en-css https://www.lndev.me/articles/positionnement-en-css Sun, 31 Jul 2022 00:00:00 GMT

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 👋

]]> leonelngoya@gmail.com (Leonel Ngoya)