Positionner des éléments absolument en CSS

Introduction

Dans ce laboratoire, les étudiants apprendront à utiliser le positionnement absolu CSS pour contrôler précisément la disposition des éléments de page web. Le laboratoire guide les participants dans la configuration d'un environnement de projet, le téléchargement d'images, la création d'une structure HTML et l'application de techniques de positionnement absolu pour manipuler le placement des images.

Les participants commenceront par créer un répertoire de projet structuré, configurer un modèle HTML5 et préparer un fichier CSS avec des styles de remise à zéro de base. Par des étapes pratiques, les apprenants exploreront la manière de positionner des éléments indépendamment du flux normal du document, acquérant des compétences pratiques dans la création de mises en page web complexes et dynamiques en utilisant le positionnement absolu CSS.

Configurer l'environnement du projet

Dans cette étape, vous allez configurer l'environnement du projet pour apprendre le positionnement absolu CSS. Nous allons créer un répertoire de projet dédié et préparer les fichiers nécessaires pour notre laboratoire.

Tout d'abord, allons-nous dans le répertoire du projet et créons un nouveau dossier pour notre projet de positionnement CSS :

cd ~/projet
mkdir css-positionnement-lab
cd css-positionnement-lab

Maintenant, créons la structure de base du projet. Nous allons créer un fichier index.html et un répertoire styles pour organiser nos fichiers CSS :

mkdir styles
touch index.html styles/main.css

Vérifions la structure du répertoire :

tree

Sortie exemple :

.
├── index.html
└── styles
    └── main.css

Ouvrez le fichier index.html dans le WebIDE. Nous allons ajouter une structure HTML5 de base pour préparer notre laboratoire de positionnement CSS :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- Nous ajouterons du contenu dans les étapes suivantes -->
  </body>
</html>

De même, ouvrez le fichier styles/main.css et ajoutez une remise à zéro de base pour supprimer le style par défaut du navigateur :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Ces premières étapes de configuration créent un environnement propre et organisé pour notre laboratoire de positionnement absolu CSS. Dans les étapes suivantes, nous téléchargerons des images et commencerons à implémenter nos techniques de positionnement.

Télécharger les images requises

Dans cette étape, vous allez télécharger les images que nous utiliserons pour démontrer le positionnement absolu CSS. Nous allons créer un répertoire images et télécharger des images d'échantillonnage à l'aide de wget.

Tout d'abord, accédez au répertoire du projet et créez un dossier images :

cd ~/projet/css-positionnement-lab
mkdir images
cd images

Maintenant, téléchargeons quelques images d'échantillonnage. Nous utiliserons des images de remplacement provenant de Lorem Picsum, qui fournit des images aléatoires à des fins de démonstration :

wget https://picsum.photos/200/300?random=1 -O image1.jpg
wget https://picsum.photos/200/300?random=2 -O image2.jpg
wget https://picsum.photos/200/300?random=3 -O image3.jpg

Vérifions les images téléchargées :

ls -l

Sortie exemple :

total 180
-rw-r--r-- 1 labex labex 59973 Jun  1 10:00 image1.jpg
-rw-r--r-- 1 labex labex 61245 Jun  1 10:00 image2.jpg
-rw-r--r-- 1 labex labex 59678 Jun  1 10:00 image3.jpg

Vérifiez les tailles des fichiers et confirmez que trois images différentes ont été téléchargées avec succès. Ces images seront utilisées dans les étapes suivantes pour démontrer les techniques de positionnement absolu en CSS.

Créer la structure HTML

Dans cette étape, vous allez créer la structure HTML pour démontrer le positionnement absolu. Nous allons modifier le fichier index.html pour inclure un conteneur avec plusieurs images que nous allons positionner absolument.

Ouvrez le fichier index.html dans le WebIDE et remplacez son contenu par le code suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="positioning-container">
      <div class="image-wrapper">
        <img src="images/image1.jpg" alt="Image 1" class="positioned-image" />
        <img src="images/image2.jpg" alt="Image 2" class="positioned-image" />
        <img src="images/image3.jpg" alt="Image 3" class="positioned-image" />
      </div>
    </div>
  </body>
</html>

Maintenant, mettez à jour le fichier styles/main.css pour configurer le style de base de notre démonstration de positionnement :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.positioning-container {
  width: 500px;
  height: 500px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.positioned-image {
  width: 200px;
  height: 300px;
  border: 2px solid red;
}

Analysons la structure HTML :

Nous avons créé un div conteneur avec la classe positioning-container
À l'intérieur, nous avons un div image-wrapper
Trois images sont ajoutées, chacune avec la classe positioned-image

La CSS fournit un paramétrage de base :

Le conteneur est défini sur une taille fixe avec une bordure
position: relative est appliqué au conteneur
Les images ont une taille fixe et une bordure rouge pour une meilleure visibilité

Appliquer le positionnement absolu aux images

Dans cette étape, vous allez apprendre à utiliser le positionnement absolu CSS pour placer précisément des images à l'intérieur d'un conteneur. Le positionnement absolu vous permet de positionner des éléments exactement où vous le souhaitez, par rapport à leur ancêtre positionné le plus proche.

Ouvrez le fichier styles/main.css et modifiez la CSS pour appliquer le positionnement absolu aux images :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.positioning-container {
  width: 500px;
  height: 500px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.positioned-image {
  width: 200px;
  height: 300px;
  border: 2px solid red;
  position: absolute;
}

/* Positionnement pour les images individuelles */
#image1 {
  top: 0;
  left: 0;
}

#image2 {
  top: 100px;
  right: 0;
}

#image3 {
  bottom: 0;
  left: 150px;
}

Maintenant, mettez à jour le fichier index.html pour ajouter des ID uniques aux images :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="positioning-container">
      <div class="image-wrapper">
        <img
          src="images/image1.jpg"
          alt="Image 1"
          id="image1"
          class="positioned-image"
        />
        <img
          src="images/image2.jpg"
          alt="Image 2"
          id="image2"
          class="positioned-image"
        />
        <img
          src="images/image3.jpg"
          alt="Image 3"
          id="image3"
          class="positioned-image"
        />
      </div>
    </div>
  </body>
</html>

Points clés sur le positionnement absolu :

position: absolute retire l'élément du flux normal du document
Positionné par rapport à l'ancêtre positionné le plus proche (dans ce cas, le .positioning-container)
Les propriétés top, bottom, left et right contrôlent le placement précis
Chaque image est positionnée différemment pour démontrer la flexibilité du positionnement absolu

Exemple de mise en page :

La première image (image1) est positionnée dans le coin supérieur gauche
La deuxième image (image2) est positionnée à 100px du haut, alignée à droite
La troisième image (image3) est positionnée en bas, à 150px de gauche

Vérifier la mise en page avec le positionnement absolu

Dans cette dernière étape, vous allez vérifier la mise en page avec le positionnement absolu et comprendre comment les images sont positionnées à l'intérieur du conteneur. Ouvrez le fichier index.html dans un navigateur web pour voir le résultat de votre positionnement absolu CSS.

Revoyons les aspects clés du positionnement absolu que nous avons implémentés :

Positionnement du conteneur

.positioning-container {
  position: relative; /* Crée un contexte de positionnement */
  width: 500px;
  height: 500px;
}

Positionnement des images

.positioned-image {
  position: absolute; /* Retire les images du flux normal du document */
  width: 200px;
  height: 300px;
}

#image1 {
  top: 0;
  left: 0;
} /* Coin supérieur gauche */
#image2 {
  top: 100px;
  right: 0;
} /* 100px du haut, aligné à droite */
#image3 {
  bottom: 0;
  left: 150px;
} /* En bas, 150px de gauche */

Observez comment les images sont positionnées :

Chaque image est placée précisément à l'intérieur du conteneur de 500x500px
Les images ne chevauchent pas les limites du conteneur
Le positionnement est contrôlé par les propriétés top, bottom, left et right

Pour expérimenter davantage, essayez de modifier les valeurs de positionnement dans la CSS pour voir comment cela affecte la mise en page des images.

Sommaire

Dans ce laboratoire, les participants apprennent les bases du positionnement absolu CSS en configurant un environnement de développement web structuré. Les premières étapes consistent à créer un répertoire de projet dédié avec une structure de fichiers claire, y compris un fichier index.html et un dossier styles, et à mettre en œuvre une réinitialisation CSS de base pour s'assurer d'un style cohérent sur différents navigateurs.

Le laboratoire guide les apprenants dans la création d'un environnement de projet propre, la préparation des fichiers HTML et CSS, et la création d'une base pour explorer les techniques de positionnement absolu. En suivant des étapes systématiques telles que la création de dossiers, l'initialisation de fichiers et l'ajout de configurations HTML et CSS initiales, les participants acquièrent une expérience pratique dans l'organisation de projets de développement web et la préparation pour des techniques avancées de mise en page CSS.