Positionnement absolu CSS37

Publié le par Julien Crego
Mise à jour le

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 solution

Solution :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Titre de la page</title>
	</head>
	<body>

	</body>
</html>

Créez un fichier css intitulé  style.css et liez-le à la page position-css37.html.

Afficher la solution

Solution :

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire.

<link  rel="stylesheet" type="text/css" href="style.css">

Exercice 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”.

Afficher la solution

Solution :

<div class="container">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim risus, lacinia eu congue vitae, bibendum sit amet eros.
</div>

À 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.

Afficher la solution

Solution :

<div class="container">
   <div></div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim risus, lacinia eu congue vitae, bibendum sit amet eros.
</div>

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.

demo 2
Afficher la solution

Solution :

.container {
  background-color: #ccc;
  margin: 20px;
}
.container div {
  background-color: #f00;
  width: 40px;
  height: 40px;
}

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

demo 3
Afficher la solution

Solution :

.container {
  position: relative;
  background-color: #ccc;
  margin: 20px;
}
.container div {
  position: absolute;
  top: -20px;
  left: -20px;
  background-color: red;
  width: 40px;
  height: 40px;
}

Essayez d’utiliser la propriété z-index pour positionner le carré rouge derrière le container. Est-ce possible ? Pourquoi ?

Afficher la solution

Solution :

La propriété z-index ne peut pas être utilisée pour positionner un enfant derrière son parent. Elle ne peut s’appliquer que sur des éléments “frères” positionnés.

Reprenez le code HTML et CSS afin d’obtenir le résultat suivant :

Afficher la solution HTML

Solution HTML :

<div class="container">
  <div></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim risus, lacinia eu congue vitae, bibendum sit amet eros.</p>
</div>
Afficher la solution CSS

Solution CSS :

.container {
  position: relative;
  margin: 20px;
}
.container p {
  position: relative;
  background-color: #ccc;
  z-index: 2;
}
.container div {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 1;
  background-color: #f00;
  width: 40px;
  height: 40px;
}

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.

Edit
Afficher la solution HTML

Solution HTML :

<div class="container">
  <div class="block block-a">A</div>
  <div class="block block-b">B</div>
  <div class="block block-c">C</div>
  <div class="block block-d">D</div>
  <div class="block block-e">E</div>
</div>
Afficher la solution CSS

Solution CSS :

body {
  font-family: "Trebuchet MS";
  background-color: #eee;
}
.container {
  border: 1px solid #ccc;
  min-height: 150px;
  margin: 20px;
  position: relative;
  background-color: #ffcdff;
}
.block {
  position: absolute;
  background-color: purple;
  color: #fff;
  padding: 5px;
}
.block-b {
  right: 0px;
}
.block-c {
  right: 0px;
  bottom: 0px;
}
.block-d {
  bottom: 0px;
}
.block-e {
  bottom: 0px;
  left: 50%;
}

Exercice 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.

Edit
Afficher la solution HTML

Solution HTML :

<div class="container">
  <div class="block block-a">
    <div class="block block-b">
      <div class="block block-c"></div>
    </div>
  </div>
</div>
Afficher la solution CSS

Solution CSS :

body {
  font-family: "Trebuchet MS";
  background-color: #eee;
}

.container {
  border: 1px solid #ccc;
  min-height: 250px;
  margin: 20px;
  position: relative;
  background-color: #9000fe;
}
.block {
  position: absolute;
  width: 50%;
  height: 50%;
}
.block-a {
  top: 10%;
  right: 10%;
  background-color: #b14cff;
}
.block-b {
  bottom: 10%;
  left: 10%;
  background-color: #d298ff;
}
.block-c {
  top: 10%;
  right: 10%;
  background-color: #f4e5ff;
}
Afficher la solution SCSS

Solution SCSS :

$color: #9000fe ;
$color-range: 15%;

body {
  font-family: "Trebuchet MS";
  background-color: #eee;
}
.container {
  border: 1px solid #ccc ;
  min-height: 250px;
  margin : 20px;
  position: relative;
  background-color: $color;
}
.block {
  position: absolute;
  width: 50%;
  height: 50%;
}
.block-a {
  top: 10%;
  right: 10%;
  background-color: lighten($color,$color-range);
}
.block-b {
  bottom: 10%;
  left: 10%;
  background-color: lighten($color,$color-range*2);
}
.block-c {
  top: 10%;
  right: 10%;
  background-color: lighten($color,$color-range*3);
}

Exercice 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.

Edit
Afficher la solution HTML

Solution HTML :

<div class="smiley">
  <div class="eye eye-left"></div>
  <div class="eye eye-right"></div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>
Afficher la solution CSS

Solution CSS :

body {
  background-color: #eee;
}
.smiley {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border-radius: 50%;
  position: relative;
  margin:auto;
}
.eye {
  position: absolute;
  background-color: #000;
  width: 15%;
  height: 15%;
  border-radius: 50%;
}
.eye-left {
  left: 25%;
  top:25%;
}
.eye-right{
  right: 25%;
  top:25%;
}
.mouth {
  position: absolute;
  bottom: 25%;
  left: 25%;
  background-color: #000;
  width: 50%;
  height: 15%;
  border-radius: 50%;
  overflow:hidden;
}
.tongue {
  background-color: #f00;
  width: 50%;
  height:60%;
  border-radius: 50%;
  position: absolute;
  bottom: -15%;
  left:25%;
}

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 sur la page en reexploitant le code de l’exercice précédent.

Edit
Afficher la solution

Solution :

Deux options en fonction de la manière donc vous avez créé le dessin :

  1. Vous avez mis des dimensions en %, il suffit alors de faire varier la taille du conteneur (classe .smiley dans la correction) ;
  2. Vous pouvez utiliser la fonction scale() en transformation CSS (exemple : transform: scale(0.5) ;).

Sauf mention contraire*, l'article Positionnement absolu [CSS37] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.