Créer une mise en page avec positionnement fixe en CSS

Introduction

Dans ce laboratoire, vous allez apprendre à créer une mise en page à position fixe à l'aide de CSS, une technique puissante pour maintenir le placement d'éléments sur une page web. Le laboratoire vous guidera dans la compréhension du concept de positionnement fixe, la configuration de la structure du projet HTML et l'application du positionnement fixe aux publicités latérales tout en explorant la manière dont les éléments peuvent rester fixes lors du défilement de la page.

En suivant les instructions étape par étape, vous acquerrez des compétences pratiques dans l'utilisation des propriétés de positionnement CSS telles que position: fixed, et apprendrez à contrôler précisément le placement d'éléments à l'aide des propriétés top, bottom, left et right. Le laboratoire vous offre une expérience pratique dans la création de mises en page réactives et visuellement cohérentes qui conservent leur position malgré le défilement de la page.

Comprendre le concept de positionnement fixe

Dans cette étape, vous allez découvrir le positionnement fixe en CSS, une technique de mise en page puissante qui permet aux éléments de rester dans une position fixe sur l'écran, quelle que soit le défilement.

Le positionnement fixe est une méthode de positionnement CSS qui fait en sorte qu'un élément reste exactement au même endroit sur l'écran, même lorsque la page est défilée. Contrairement à d'autres méthodes de positionnement, les éléments fixes ne bougent pas lorsque l'utilisateur défile la page.

Explorons le concept de base avec un exemple simple :

<!doctype html>
<html>
  <head>
    <style>
      .fixed-element {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #f1f1f1;
        padding: 10px;
        border: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div class="fixed-element">I'm a fixed element that stays in place!</div>
    <div style="height: 2000px;">
      Scroll down to see the fixed element remain in position
    </div>
  </body>
</html>

Caractéristiques clés du positionnement fixe :

Utilise position: fixed; en CSS
Positionné par rapport à la fenêtre du navigateur
Ne bouge pas lorsque la page est défilée
Peut être placé précisément à l'aide des propriétés top, bottom, left et right

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

Le .fixed-element restera toujours à 20 pixels du haut et de la droite de l'écran
Même si vous défilez vers le bas, cet élément reste exactement au même endroit sur l'écran

Configurer la structure du projet HTML

Dans cette étape, vous allez créer la structure du projet pour notre démonstration de mise en page à position fixe. Nous allons configurer un projet HTML simple dans le répertoire ~/projet qui servira de base pour notre exercice de positionnement CSS.

Tout d'abord, accédez au répertoire du projet et créez les fichiers nécessaires :

cd ~/projet
mkdir fixed-positioning-demo
cd fixed-positioning-demo

Maintenant, créez la structure de base de fichiers HTML :

touch index.html
touch styles.css

Ouvrez le fichier index.html et ajoutez la structure HTML de base suivante :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>This is a sample page to demonstrate fixed positioning in CSS.</p>

      <!-- We'll add more content in subsequent steps -->
    </div>
  </body>
</html>

Créez un fichier CSS de base styles.css avec quelques styles initiaux :

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

Structure de sortie d'exemple :

~/projet/fixed-positioning-demo/
├── index.html
└── styles.css

Cette configuration fournit une structure de projet propre et simple sur laquelle nous allons construire dans les étapes suivantes pour démontrer les techniques de positionnement fixe.

Appliquer le positionnement fixe aux publicités latérales

Dans cette étape, vous allez apprendre à créer des publicités latérales à position fixe à l'aide de CSS. Nous allons modifier les fichiers index.html et styles.css pour ajouter des éléments de publicité latérale qui restent en place lors du défilement.

Mettez à jour le fichier index.html pour inclure des éléments de publicité latérale :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Left Side Ad</h3>
      <p>This ad stays in place!</p>
    </div>

    <div class="right-ad">
      <h3>Right Side Ad</h3>
      <p>Another fixed advertisement</p>
    </div>

    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>Scroll down to see how the side advertisements remain fixed.</p>

      <!-- Add more content to create scrolling effect -->
      <div style="height: 2000px;">Long content to demonstrate scrolling</div>
    </div>
  </body>
</html>

Modifiez le fichier styles.css pour appliquer le positionnement fixe aux publicités :

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.left-ad,
.right-ad {
  position: fixed;
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.left-ad {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.right-ad {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

Points clés sur le positionnement fixe :

position: fixed; maintient les publicités dans une position constante
Les propriétés left et right positionnent les publicités sur les côtés de l'écran
top: 50% et transform: translateY(-50%) centrent les publicités verticalement

Sortie d'exemple dans un navigateur :

Deux publicités latérales apparaîtront fixées sur l'écran
Les publicités restent en place lors du défilement de la page
Les publicités sont centrées verticalement sur l'écran

Ajuster le placement des éléments avec les propriétés top et right

Dans cette étape, vous allez apprendre à contrôler précisément le placement des éléments à position fixe à l'aide des propriétés top, right, bottom et left. Ces propriétés CSS vous permettent de positionner les éléments fixes exactement où vous le souhaitez sur l'écran.

Mettez à jour le fichier styles.css pour démontrer différentes techniques de positionnement :

/* Les styles précédents restent les mêmes */

.left-ad {
  position: fixed;
  top: 20px; /* 20 pixels du haut de l'écran */
  left: 20px; /* 20 pixels de la gauche de l'écran */
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.right-ad {
  position: fixed;
  top: 50%; /* Centré verticalement */
  right: 20px; /* 20 pixels de la droite de l'écran */
  width: 150px;
  transform: translateY(-50%); /* Ajustement pour un centrage parfait */
  background-color: #e4e4e4;
  padding: 10px;
  border: 1px solid #ccc;
}

.bottom-ad {
  position: fixed;
  bottom: 20px; /* 20 pixels du bas de l'écran */
  left: 50%; /* Centré horizontalement */
  width: 300px;
  transform: translateX(-50%); /* Ajustement pour un centrage parfait */
  background-color: #d4d4d4;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbb;
}

Mettez à jour le fichier index.html pour inclure la nouvelle publicité en bas :

<body>
  <div class="left-ad">
    <h3>Left Side Ad</h3>
    <p>Positioned 20px from top-left</p>
  </div>

  <div class="right-ad">
    <h3>Right Side Ad</h3>
    <p>Vertically centered</p>
  </div>

  <div class="bottom-ad">
    <h3>Bottom Ad</h3>
    <p>Centered at the bottom of the screen</p>
  </div>

  <div class="content">
    <h1>Fixed Positioning Layout</h1>
    <p>Explore different positioning techniques</p>

    <div style="height: 2000px;">Scroll to see fixed elements</div>
  </div>
</body>

Propriétés de positionnement clés expliquées :

top : Distance du haut de l'écran
right : Distance de la droite de l'écran
bottom : Distance du bas de l'écran
left : Distance de la gauche de l'écran
transform : Ajuster le positionnement pour un centrage parfait

Sortie d'exemple dans un navigateur :

Publicité gauche : 20 pixels du coin supérieur gauche
Publicité droite : Centrée verticalement sur le côté droit
Publicité en bas : Centrée au bas de l'écran
Tous les éléments restent fixes lors du défilement

Tester le comportement de défilement des éléments fixes

Dans cette étape, vous allez explorer le comportement de défilement unique des éléments à position fixe en ajoutant plus de contenu pour démontrer comment ces éléments restent immobiles tandis que la page est défilée.

Mettez à jour le fichier index.html pour inclure plus de contenu pour le défilement :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Scroll Test</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Left Ad</h3>
      <p>I stay in place!</p>
    </div>

    <div class="right-ad">
      <h3>Right Ad</h3>
      <p>Always visible</p>
    </div>

    <div class="bottom-ad">
      <h3>Bottom Ad</h3>
      <p>Fixed at bottom</p>
    </div>

    <div class="content">
      <h1>Scrolling Behavior Demonstration</h1>

      <div class="scroll-content">
        <h2>Scroll Down to See Fixed Elements</h2>

        <!-- Create long content to enable scrolling -->
        <div class="long-content">
          <h3>Long Content Section</h3>
          <p>
            This section will allow you to scroll and observe how fixed-position
            elements remain in place.
          </p>

          <!-- Repeat paragraphs to create scrollable content -->
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in
            dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.
          </p>

          <!-- Add multiple repetitions to create significant scroll length -->
          <p>
            Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in
            nulla enim. Phasellus molestie magna non est bibendum non venenatis
            nisl tempor.
          </p>

          <!-- Repeat similar paragraphs multiple times -->
          <p>
            Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor
            posuere. Praesent id metus massa, ut blandit odio.
          </p>

          <!-- Continue adding paragraphs to create scroll effect -->
          <p>
            Proin quis tortor orci. Etiam at risus et justo dignissim congue.
            Donec congue lacinia dui, a porttitor lectus condimentum laoreet.
          </p>

          <!-- More paragraphs to extend scrolling -->
          <p>
            Nunc dignissim risus id metus. Cras ornare tristique elit. Vivamus
            vestibulum nulla sit amet tristique reprehenderit.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Mettez à jour le fichier styles.css pour améliorer la démonstration de défilement :

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.long-content {
  background-color: #f9f9f9;
  padding: 20px;
}

/* Les styles de positionnement fixe précédents restent les mêmes */

Observations clés sur le positionnement fixe :

Les éléments fixes restent dans la même position sur l'écran
Le défilement n'affecte pas leur placement
Les éléments restent visibles quelle que soit la position de défilement de la page

Comportement de défilement d'exemple :

Les publicités gauche, droite et en bas restent immobiles
Le contenu se défile derrière les éléments fixes
Les éléments fixes sont toujours visibles sur l'écran

Sommaire

Dans ce laboratoire, les participants ont appris à utiliser le positionnement fixe en CSS, une technique de mise en page puissante qui permet aux éléments de rester immobiles sur l'écran malgré le défilement de la page. En utilisant la propriété position: fixed, les développeurs peuvent créer des éléments qui restent dans un emplacement constant, tels que des publicités latérales ou des menus de navigation, qui restent visibles même lorsque les utilisateurs défilent le contenu.

Le laboratoire a guidé les apprenants dans la création d'un exemple pratique démontrant le positionnement fixe, y compris la configuration de la structure d'un projet HTML et l'application de propriétés CSS telles que top et right pour contrôler précisément le placement des éléments. Les participants ont exploré les caractéristiques clés du positionnement fixe, telles que sa référence à la fenêtre du navigateur et sa capacité à maintenir une position constante sur l'écran, en fournissant une expérience pratique de cette technique essentielle de mise en page CSS.