Positionnement absolu [CSS37]

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.

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

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

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

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

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

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

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

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 :

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

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

Consultez ce code créé par crego (@crego) sur le site CodePen.

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

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.

Consultez ce code créé par crego (@crego) sur le site CodePen.

<div class="container">
  <div class="block block-a">
    <div class="block block-b">
      <div class="block block-c"></div>
    </div>
  </div>
</div>

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;
}

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

Consultez ce code créé par crego (@crego) sur le site CodePen.

<div class="smiley">
  <div class="eye eye-left"></div>
  <div class="eye eye-right"></div>
  <div class="mouth">
    <div class="tongue"></div>
  </div>
</div>

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.

Consultez ce code créé par crego (@crego) sur le site CodePen.

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

Vous avez mis des dimensions en %, il suffit alors de faire varier la taille du conteneur (classe .smiley dans la correction) ;
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

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.