🧭 Aide CSS : L'attribut position et les valeurs sticky et fixed

📌 Qu'est-ce que l'attribut position en CSS ?

L'attribut position permet de définir comment un élément HTML est positionné dans la page. Il influence la manière dont l'élément interagit avec le flux du document et les autres éléments.

Parmi les valeurs disponibles, ce résumé se concentre sur :

• sticky
• fixed

⚠️ D'autres valeurs existent comme static, relative et absolute, mais elles ne sont pas couvertes ici.

---

🧷 position: sticky

🔍 Description

Un élément sticky reste dans le flux normal du document jusqu'à ce qu'il atteigne une position définie (via top, left, etc.), puis il "colle" à cette position pendant le défilement.

✅ Exemple d'application : Menu collant

nav {
    position: sticky; /*Indique que l'élément doit coller*/
    top: 0; /*Indique la position où l'élément doit coller*/
}

Ce menu reste visible en haut de la page lorsque l'utilisateur fait défiler le contenu.

Ajouter l'attribut z-index pour fournir une hauteur suppérieure dans les couches de la page.

nav {
    position: sticky; /*Indique que l'élément doit coller*/
    top: 0; /*Indique la position où l'élément doit coller*/
    z-index: 20;    /*20e couche au-dessus des autres*/
}

📎 position: fixed

🔍 Description

Un élément fixed est retiré du flux du document et reste fixé à une position par rapport à la fenêtre du navigateur, peu importe le défilement.

✅ Exemple d'application : Flèche de retour vers le haut

img {
    position: fixed;    /*Rend la position fixe*/
    bottom: 2rem;       /*Indique la distance du bas*/
    right: 2rem;        /*Indique la distance de la droite*/
}

La flèche représentée par l'image reste visible en bas à droite de l’écran, même lorsque l’utilisateur fait défiler la page.

🧠 À retenir

• Utilisez sticky pour des éléments qui doivent rester visibles temporairement pendant le scroll.
• Utilisez fixed pour des éléments qui doivent rester visibles en permanence.
• N'oubliez pas de définir les propriétés comme top, bottom, left, ou right pour que ces positions fonctionnent correctement.
• Pensez à gérer la superposition avec z-index.