Positionnement relatif [CSS36]

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.

<!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-css36.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 : Logo (pas à pas)

HTML : Insérez un titre de niveau 1 contenant le texte suivant « Mon super logo ».

<h1>Mon super logo</h1>

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

<h1>Mon <span>super</span> logo</h1>

CSS : En utilisant un positionnement relatif, positionnez le mot super afin de reproduire le modèle suivant :

h1 span {
  position: relative;
  top: -20px;
}

Gérez la casse (majuscule/minuscule) de votre logo en utilisant CSS.

h1 {
  font-variant: small-caps;
}

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

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

<div class="container">
  <h1>Titre du truc</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
  sit amet felis efficitur, dictum felis in, consectetur neque.
  Aliquam nec tincidunt eros, eget venenatis massa. Suspendisse
  turpis dui, ultricies tristique.</p>
</div>

body {
  background-color: #ddd ;
  font-family: 'Trebuchet MS';
}
.container {
  width: 60%;
  margin: auto;
  border: 1px solid #ccc ;
  background-color: #fff ;
  padding: 10px;
}
h1 {
  margin: 0px;
  padding: 5px 10px;
  color: #fff ;
  background-color: purple ;
  margin-bottom: 10px;
  position: relative;
  right: 50px;
}

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

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

<h1>Hello <span>W</span><span>O</span><span>R</span><span>L</span><span>D</span></h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet felis efficitur, dictum felis in, consectetur neque. Aliquam nec tincidunt eros, eget venenatis massa. Suspendisse turpis dui, ultricies tristique quam vitae, vestibulum condimentum urna. Pellentesque libero tortor, luctus et diam quis, facilisis hendrerit magna. Aliquam at justo vitae nisl consectetur sagittis eu eu est. Fusce vehicula purus nibh, in gravida tellus aliquam in. Donec vitae pulvinar arcu. In pellentesque nibh ut lectus efficitur laoreet. Sed vitae laoreet purus, quis iaculis nulla. Phasellus at aliquet elit. Curabitur consectetur tincidunt nisl cursus facilisis.</p>

body {
  background-color: #ddd;
  font-family: 'Trebuchet MS';
}
h1 {
  color: purple;
  margin-bottom: 10px;
}
span {
  position: relative;
}
span:nth-child(1) {
  top: 10px;
}
span:nth-child(2) {
  top: 20px;
}
span:nth-child(3) {
  top: 30px;
}
span:nth-child(4) {
  top: 40px;
}
span:nth-child(5) {
  top: 50px;
}

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