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.

Voici la structure de base d’une page HTML.

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

    </body>
</html>

<!doctype html><html lang="fr">    <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.

Le code ci-dessous doit être placé dans l’en-tête <head> de la page HTML. Il est nécessaire de personnaliser la valeur de l’attribut href afin qu’elle corresponde à l’emplacement et au nom du fichier CSS à lier.

<link  rel="stylesheet" type="text/css" href="style.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>

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

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

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

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

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

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

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

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>

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

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

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

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

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.

Positionnement absolu CSS37

Préparation de l’exercice

Exercice 1 : Un carré rouge (pas à pas)

Exercice 2 : dans tous les coins (basé sur un modèle)

Exercice 3 : imbrication de blocs (basé sur un modèle)

Exercice 4 : smiley (basé sur un modèle)

Commentaires

Exercice 1 : Un carré rouge (pas à pas)

Exercice 2 : dans tous les coins (basé sur un modèle)

Exercice 3 : imbrication de blocs (basé sur un modèle)

Exercice 4 : smiley (basé sur un modèle)