Plusieurs petits exercices consistant à tester les principes du positionnement relatif en CSS en reproduisant des modèles.
Pour rappel, le positionnement relatif consiste à positionner un élément HTML par rapport à sa propre position dans le flux. Ce positionnement s’effectue avec les propriétés display
, top
, bottom
, left
et right
.
Deux points à retenir lorsqu’un élément est positionné en relatif :
- L’élément ne sort pas du flux HTML, l’espace qu’il occupait dans le flux est donc conservé.
- L’élément conserve les dimensions qu’il pouvait avoir avant positionnement.
Préparation de l’exercice
Créez un dossier racine à l’emplacement de votre choix.
Créez un fichier html intitulé position-css36.html avec la structure de base.
Afficher la solutionCréez un fichier css intitulé style.css et liez-le à la page position-css36.html.
Afficher la solutionExercice 1 : Logo (pas à pas)
HTML : Insérez un titre de niveau 1 contenant le texte suivant “Mon super logo”.
Afficher la solution HTMLHTML : Insérez un élément de type inline neutre sémantiquement autour du mot “super” afin de pouvoir le manipuler indépendamment du reste du titre.
Afficher la solution HTMLCSS : En utilisant un positionnement relatif, positionnez le mot super afin de reproduire le modèle suivant :

Gérez la casse (majuscule/minuscule) de votre logo en utilisant CSS.
Afficher la solution CSSExercice 2 : Positionnement relatif d’un titre (basé sur un modèle)
Observez attentivement l’exemple ci-dessous (faites varier la largeur de la fenêtre si nécessaire), puis reproduisez-le sur la page position-css36.html .
Afficher la solution HTMLAfficher la solution CSSExercice 3 : Titre avec lettres en cascade (basé sur un modèle)
Vous pouvez choisir de créer un nouveau fichier position-css36-2.html auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.
Observez attentivement l’exemple ci-dessous, puis essayez de le reproduire.
Afficher la solution HTMLAfficher la solution CSSSauf mention contraire*, l'article Positionnement relatif [CSS36] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.