Plusieurs petits exercices consistant à tester les principes du positionnement absolu en CSS en reproduisant des modèles.
Pour rappel, le positionnement absolu consiste à positionner un élément HTML par rapport à son ancêtre le plus proche ayant été positionné (quel que soit le positionnement). 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 absolu :
- L’élément sort du flux HTML, l’espace qu’il occupait dans le flux est donc libéré.
- Les éléments de type bloc n’ont plus une largeur de 100% par défaut.
Préparation de l’exercice
Créez un dossier racine à l’emplacement de votre choix.
Créez un fichier html intitulé position-css37.html avec la structure de base.
Afficher la solutionCréez un fichier css intitulé style.css et liez-le à la page position-css37.html.
Afficher la solutionExercice 1 : Un carré rouge (pas à pas)
Créez un bloc HTML avec la classe container
et le texte “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim risus, lacinia eu congue vitae, bibendum sit amet eros”.
À l’intérieur de l’élément container
, insérez un second bloc vide. Vous allez devoir le sélectionner par la suite en CSS.
En CSS, dimensionnez le second bloc pour en faire un carré de 40px de large, mettez des couleurs pour bien distinguer les différents éléments et ajoutez une marge de 20px à l’élément container
.

Positionnez le carré rouge comme dans l’image ci-dessous.

Essayez d’utiliser la propriété z-index
pour positionner le carré rouge derrière le container. Est-ce possible ? Pourquoi ?
Reprenez le code HTML et CSS afin d’obtenir le résultat suivant :

Exercice 2 : dans tous les coins (basé sur un modèle)
Vous pouvez choisir de créer un nouveau fichier position-css37-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 CSSExercice 3 : imbrication de blocs (basé sur un modèle)
Vous pouvez choisir de créer un nouveau fichier position-css37-3.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 reproduisez-le.
Afficher la solution HTMLAfficher la solution CSSAfficher la solution SCSSExercice 4 : smiley (basé sur un modèle)
Vous pouvez choisir de créer un nouveau fichier auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.
Observez attentivement l’exemple ci-dessous, puis reproduisez-le.
Afficher la solution HTMLAfficher la solution CSSVous pouvez choisir de créer un nouveau fichier auquel vous liez le fichier css ou de travailler à la suite de l’exercice précédent.
Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page en reexploitant le code de l’exercice précédent.
Afficher la solutionSauf mention contraire*, l'article Positionnement absolu [CSS37] 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.