Historique des conversations
Chargement...
Chapitre 7 : Le positionnement en CSS
1. La propriété position
La propriété position permet de définir la manière dont un élément est positionné dans son conteneur.
Elle fonctionne en combinaison avec les propriétés top, left, right et bottom.
2. Les valeurs possibles de position
static (par défaut)
L’élément est positionné normalement dans le flux du document. Les propriétés top et left sont ignorées.
relative
L’élément est positionné par rapport à sa position normale. Tu peux le décaler avec top, left, etc.
.relatif {
position: relative;
top: 10px;
left: 20px;
}absolute
L’élément est retiré du flux normal et positionné par rapport à son conteneur le plus proche avec position: relative.
fixed
L’élément est fixé par rapport à la fenêtre du navigateur (utile pour les barres de navigation fixes).
sticky
L’élément devient fixed lorsqu’on fait défiler la page, mais reste dans son flux normal sinon.
3. Exemple visuel simple
<div class="parent" style="position: relative;">
<div class="enfant" style="position: absolute; top: 10px; left: 10px;">
Élément positionné
</div>
</div>Dans cet exemple, .enfant est positionné relativement à .parent.
4. Z-index (profondeur)
La propriété z-index permet de définir quel élément passe "au-dessus" d’un autre quand ils se chevauchent.
Plus la valeur est élevée, plus l’élément est au premier plan.
.popup {
position: absolute;
z-index: 999;
}Conclusion
Le positionnement CSS te permet de placer des éléments où tu le souhaites, avec précision. Dans le prochain chapitre, nous allons aborder le système Flexbox, un outil moderne et puissant pour créer des mises en page flexibles.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 7
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Position Relative
Atelier #1Déplace un élément de 20px vers le bas par rapport à sa position normale sans affecter les autres.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.box {
position: relative;
top: 20px;
}
#2 — Position Absolue
Atelier #2Place un élément précisément dans le coin supérieur droit de son parent positionné.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.child {
position: absolute;
top: 0;
right: 0;
}
#3 — Position Fixe
Atelier #3Crée une barre de navigation qui reste bloquée en haut de l'écran lors du défilement.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
nav {
position: fixed;
top: 0;
width: 100%;
}
#4 — Z-index
Atelier #4Fais en sorte qu'un élément passe au-dessus des autres (niveau d'empilement).
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.on-top {
position: relative; /* nécessaire pour le z-index */
z-index: 10;
}
#5 — Position Sticky
Atelier #5Applique une position 'collante' qui s'arrête en haut au scroll pour les titres <h2>.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
h2 {
position: sticky;
top: 0;
background: white;
}