🎯 Semaine 2 - Jour 2 : Positionnement CSS

📚 Le positionnement en CSS

Le positionnement CSS permet de contrôler précisément où les éléments apparaissent sur la page. Nous allons découvrir les 5 types de positionnement (static, relative, absolute, fixed, sticky) ainsi que les backgrounds et les pseudo-classes/pseudo-éléments.

📍 Les types de position

position: static (défaut)

Position par défaut, suit le flux normal du document.

                        .element {

                          position: static;

                        }

Je suis en position static (flux normal)

📌 Note : top, right, bottom, left n'ont aucun effet

position: relative

Déplacé par rapport à sa position normale, mais garde sa place dans le flux.

                        .element {

                          position: relative;

                          top: 20px;

                          left: 30px;

                        }

Élément normal

Je suis déplacé de 20px vers le bas et 30px vers la droite

Élément suivant

✅ Usage : Point de référence pour position: absolute

position: absolute

Retiré du flux, positionné par rapport au premier parent en position relative (ou au <body>).

                        .element {

                          position: absolute;

                          top: 50px;

                          right: 20px;

                        }

Conteneur parent (position: relative)

Position absolute
(top: 50px, right: 20px)

✅ Usage : Badges, tooltips, overlays, popups

position: fixed

Fixé par rapport à la fenêtre du navigateur, reste visible au scroll.

                        .element {

                          position: fixed;

                          bottom: 20px;

                          right: 20px;

                        }

👁️ Regardez en bas à droite : la box violette reste fixe quand vous scrollez !

✅ Usage : Header fixe, bouton "retour en haut", chat widget

position: sticky

Mélange entre relative et fixed. Devient fixe après avoir scrollé jusqu'à lui.

                        .element {

                          position: sticky;

                          top: 0;

                        }

Je deviens sticky au scroll ! (top: 0)

✅ Usage : En-têtes de tableaux, menus de navigation

z-index (Profondeur)

Contrôle l'ordre d'empilement des éléments positionnés.

                        .layer-1 { z-index: 1; }

                        .layer-2 { z-index: 2; }

                        .layer-3 { z-index: 3; }

z-index: 1

z-index: 2

z-index: 3

📌 Note : Fonctionne uniquement avec position (sauf static)

🎨 Backgrounds CSS

Arrière-plans (Background)

background-color: Couleur unie
background-color: #3498db;

background (gradient): Dégradé de couleurs
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

background-image: Image d'arrière-plan
background-image: url('image.jpg');

                        /* Propriétés background */

                        background-color: #3498db;

                        background-image: url('image.jpg');

                        background-size: cover; /* contain, 100%, auto */

                        background-position: center; /* top, bottom, left, right */

                        background-repeat: no-repeat; /* repeat, repeat-x, repeat-y */

                        background-attachment: fixed; /* scroll, local */

                        /* Syntaxe raccourcie */

                        background: url('image.jpg') center/cover no-repeat;

🎭 Pseudo-classes

Pseudo-classes de lien

États interactifs des liens.

Survolez-moi pour voir :hover Cliquez-moi pour voir :active

                        a:link { color: blue; }

                        a:visited { color: purple; }

                        a:hover { color: red; }

                        a:active { color: orange; }

                        a:focus { outline: 2px solid blue; }

Pseudo-classes structurelles

Cibler des éléments selon leur position.

Premier élément (:first-child)
Élément impair (:nth-child(odd))
Élément pair (:nth-child(even))
Élément impair
Dernier élément (:last-child)

                        li:first-child { ... }

                        li:last-child { ... }

                        li:nth-child(odd) { ... }

                        li:nth-child(even) { ... }

                        li:nth-child(3) { ... }

✨ Pseudo-éléments

::before et ::after

Insère du contenu avant ou après un élément.

Cet élément a du contenu ajouté via ::before et ::after

                        .element::before {

                          content: '📌 ';

                        }

                        .element::after {

                          content: ' ✨';

                        }

Exemple : Citation stylisée

Le CSS est un langage puissant qui permet de créer des designs magnifiques et interactifs.

                        .quote::before {

                          content: '"';

                          position: absolute;

                          font-size: 4em;

                          color: #3498db;

                          opacity: 0.3;

                        }

Froggiesplaining :

🎯 Objectifs de ce cours :
✅ Comprendre les 5 types de positionnement CSS
✅ Utiliser z-index pour gérer les superpositions
✅ Maîtriser les propriétés background
✅ Appliquer les pseudo-classes (:hover, :nth-child, etc.)
✅ Créer du contenu avec ::before et ::after

📖 Résumé :
• static : flux normal (défaut)
• relative : décalage depuis position normale
• absolute : par rapport au parent positionné
• fixed : par rapport à la fenêtre
• sticky : relative puis fixed au scroll

🏋️ Exercice :
Créez un header sticky avec navigation + un bouton "retour en haut" en position fixed !