Appliquer le positionnement relatif en CSS

Introduction

Dans ce laboratoire, vous allez apprendre à appliquer le positionnement relatif en CSS en créant une mise en page web avec deux images. Le laboratoire vous guide dans la configuration de la structure d'un projet HTML, la création d'une feuille de style CSS de base et la mise en œuvre de techniques de positionnement relatif pour le placement d'images.

Vous commencerez par créer un répertoire de projet, initialiser un fichier HTML avec des emplaceholders d'images et télécharger des images d'échantillonnage. Ensuite, vous développerez une feuille de style CSS pour définir la mise en page et le positionnement de ces images en utilisant le positionnement relatif, qui vous permet d'ajuster la position des éléments par rapport à leur flux normal de document sans affecter les mises en page d'autres éléments.

Configurer la structure du projet HTML

Dans cette étape, vous allez configurer la structure de base d'un projet HTML pour apprendre le positionnement relatif en CSS. Nous allons créer un répertoire de projet simple et initialiser les fichiers nécessaires pour notre expérience de mise en page web.

Tout d'abord, accédez au répertoire de projet :

cd ~/projet

Créez un nouveau répertoire pour notre projet de positionnement en CSS :

mkdir css-positionnement
cd css-positionnement

Maintenant, créez les fichiers de projet de base à l'aide de l'IDE Web :

Créez un fichier HTML nommé index.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Positionnement relatif en CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <img src="left-image.jpg" alt="Image de gauche" class="left-image" />
      <img src="right-image.jpg" alt="Image de droite" class="right-image" />
    </div>
  </body>
</html>

Téléchargez des images d'échantillonnage pour le projet :

wget https://labex.io/sample-left-image.jpg -O left-image.jpg
wget https://labex.io/sample-right-image.jpg -O right-image.jpg

Sortie d'exemple :

--2024-xx-xx xx:xx:xx--  https://labex.io/sample-left-image.jpg
Résolution de labex.io (labex.io)...
Téléchargement des images d'échantillonnage...

Cette configuration crée une structure HTML de base avec des emplaceholders pour les images et prépare le projet pour les expériences de positionnement en CSS dans les étapes suivantes.

Créer une feuille de style CSS de base

Dans cette étape, vous allez créer une feuille de style CSS de base pour définir les styles de base de votre page web. CSS (Cascading Style Sheets) vous permet de contrôler la mise en page, l'apparence et le positionnement des éléments HTML.

Accédez au répertoire de projet :

cd ~/projet/css-positionnement

Créez un nouveau fichier CSS nommé styles.css dans l'IDE Web :

/* Réinitialisation de base et styles de conteneur */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
}

/* Styles d'image initial */
.left-image,
.right-image {
  width: 200px;
  height: auto;
  border: 1px solid #666;
}

Analysons le CSS :

Le sélecteur * applique une réinitialisation pour supprimer les marges et les paddings par défaut
.container crée un conteneur centré avec une bordure
.left-image et .right-image définissent les tailles initiales des images et ajoutent une bordure

Sortie d'exemple lors de l'affichage dans un navigateur :

[Un conteneur centré avec une bordure, contenant deux images de taille égale]

Cette feuille de style de base fournit les bases de notre expérience de positionnement relatif. Dans les étapes suivantes, nous modifierons ces styles pour démontrer les techniques de positionnement relatif.

Mettre en œuvre le positionnement relatif pour l'image de gauche

Dans cette étape, vous allez apprendre à utiliser le positionnement relatif pour déplacer l'image de gauche dans son flux de document d'origine. Le positionnement relatif vous permet d'ajuster la position d'un élément par rapport à sa position normale sans affecter les autres éléments.

Ouvrez le fichier styles.css dans l'IDE Web et ajoutez le CSS suivant pour l'image de gauche :

.left-image {
  position: relative;
  top: 20px; /* Décale 20 pixels vers le bas */
  left: 50px; /* Décale 50 pixels vers la droite */
  background-color: #f0f0f0; /* Ajoute un fond clair pour la visibilité */
}

Points clés sur le positionnement relatif :

position: relative; active le positionnement relatif
top déplace l'élément vers le bas
left déplace l'élément vers la droite
L'espace d'origine de l'élément est conservé
Les autres éléments ne sont pas affectés par ce déplacement

Sortie visuelle d'exemple :

[Image de gauche déplacée de 20px vers le bas et de 50px vers la droite,
 conservant son espace de mise en page d'origine]

Le positionnement relatif vous permet d'ajuster finement le placement des éléments sans perturber la mise en page globale de la page.

Mettre en œuvre le positionnement relatif pour l'image de droite

Dans cette étape, vous allez appliquer le positionnement relatif à l'image de droite, en démontrant comment déplacer des éléments indépendamment à l'aide de CSS. Nous utiliserons des valeurs de positionnement différentes pour montrer la flexibilité du positionnement relatif.

Ouvrez le fichier styles.css dans l'IDE Web et ajoutez le CSS suivant pour l'image de droite :

.right-image {
  position: relative;
  bottom: 30px; /* Décale 30 pixels vers le haut */
  right: -40px; /* Décale 40 pixels vers la gauche */
  background-color: #e0e0e0; /* Ajoute un fond clair pour la visibilité */
}

Différences clés dans le positionnement :

bottom déplace l'élément vers le haut
right avec une valeur négative déplace l'élément vers la gauche
L'image conserve son espace de mise en page d'origine
Les autres éléments ne sont pas affectés par ce déplacement

Sortie visuelle d'exemple :

[Image de droite déplacée de 30px vers le haut et de 40px vers la gauche,
 conservant son espace de mise en page d'origine]

Cet exemple démontre comment vous pouvez utiliser différentes propriétés de positionnement pour ajuster finement le placement des éléments en utilisant le positionnement relatif.

Vérifier le positionnement et la mise en page

Dans cette étape finale, vous allez réviser et vérifier les techniques de positionnement relatif appliquées aux images. Nous allons apporter quelques touches finales pour améliorer la compréhension visuelle de la manière dont le positionnement relatif fonctionne.

Mettez à jour le fichier styles.css avec un style complet pour souligner le positionnement :

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
  text-align: center;
}

.left-image,
.right-image {
  width: 200px;
  height: auto;
  border: 3px solid #666;
  transition: transform 0.3s ease;
}

.left-image {
  position: relative;
  top: 20px;
  left: 50px;
  background-color: #f0f0f0;
}

.right-image {
  position: relative;
  bottom: 30px;
  right: -40px;
  background-color: #e0e0e0;
}

/* Ajoutez un effet au survol pour visualiser le positionnement */
.left-image:hover,
.right-image:hover {
  transform: scale(1.05);
}

Points clés de vérification :

Les images sont positionnées par rapport à leurs emplacements d'origine
Le conteneur maintient une mise en page cohérente
Les effets au survol aident à visualiser le positionnement

Sortie visuelle d'exemple :

[Deux images positionnées différemment dans un conteneur centré,
 avec des effets au survol subtils pour souligner leurs positions]

Ce style final démontre le pouvoir du positionnement relatif dans la création de mises en page flexibles et dynamiques.

Résumé

Dans ce laboratoire, les participants ont appris à appliquer le positionnement relatif en CSS en créant un projet web structuré à partir de zéro. Le processus a consisté à configurer un répertoire de projet HTML, à créer un fichier index.html avec des emplaceholders d'images et à télécharger des images d'échantillons pour démontrer les techniques de positionnement.

Le laboratoire a guidé les apprenants dans la création d'une feuille de style CSS de base, l'établissement de principes de style de base et la préparation des bases pour la mise en œuvre du positionnement relatif pour les images de gauche et de droite. En suivant les instructions étape par étape, les participants ont acquis une expérience pratique dans la gestion des éléments de mise en page web et dans la compréhension de la manière dont le positionnement CSS peut être utilisé pour contrôler le placement des images dans un conteneur.