Positionnement CSS – Absolu, Relatif, Fixe et Collant.

Conférence 11 : Positionnement CSS – Absolu, relatif, fixe et collant

Bienvenue à la onzième conférence du cours "Basic to Brilliance". Dans cette conférence, nous explorerons les différents types de Positionnement CSS : relatif, absolu, fixe et collant. Comprendre le positionnement vous permet de contrôler où les éléments apparaissent sur une page et comment ils se comportent lorsque les utilisateurs interagissent avec le contenu.

---

1. Comprendre la position Propriété

La propriété position spécifie comment un élément est positionné dans le document. Il peut prendre les valeurs suivantes :

• statique : Valeur par défaut. Les éléments sont positionnés selon le flux normal des documents.
• relatif : L'élément est positionné par rapport à sa position normale.
• absolu : l'élément est positionné par rapport à son ancêtre positionné le plus proche ou au bloc contenant initial.
• fixe : L'élément est positionné par rapport à la fenêtre du navigateur et reste dans la même position lors du défilement.
• sticky : l'élément est traité comme relatif jusqu'à ce qu'il atteigne un seuil (par exemple, une position de défilement), puis il devient fixe.

---

2. Positionnement relatif

Un élément avec position: relative est positionné par rapport à sa position d'origine (statique). Il reste dans le flux documentaire, ce qui signifie que d'autres éléments en tiendront toujours compte.

• Exemple : Utilisation du positionnement relatif pour déplacer un élément.

  .box {
    position: relative;
    top: 20px; /* Moves the box 20px down from its normal position */
    left: 30px; /* Moves the box 30px to the right */
  }

Dans cet exemple, l'élément est décalé de 20px vers le bas et de 30px vers la droite par rapport à sa position d'origine, mais son espace dans le flux documentaire est préservé.

---

3. Positionnement absolu

Les éléments avec position : absolue sont supprimés du flux de documents et positionnés par rapport à leur ancêtre positionné le plus proche (c'est-à-dire un ancêtre avec une position autre que statique).

• Exemple : Positionnement absolu d'un élément à l'intérieur d'un conteneur.

  .container {
    position: relative; /* This container is the reference for the absolute positioning */
    width: 300px;
    height: 200px;
    background-color: #f4f4f4;
  }

  .box {
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 10px;
  }

Dans cet exemple :

• Le .box est positionné de manière absolue à 50px du haut et à 20px de la droite à l'intérieur de l'élément .container.
• Le .container a position: relative, ce qui en fait la référence de positionnement du .box.

---

4. Positionnement fixe

Un élément avec position:fixe est positionné par rapport à la fenêtre du navigateur, quelle que soit la façon dont la page défile.

• Exemple : Création d'une barre de navigation fixe.

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
  }

Dans cet exemple :

• La barre .nav est positionnée en haut de la fenêtre et reste fixe même lorsque la page défile.

---

5. Positionnement collant

Un élément avec position: sticky est traité comme relatif jusqu'à ce que l'utilisateur dépasse un seuil défini, auquel cas il devient fixe.

• Exemple : En-tête collant qui reste en haut après le défilement.

  .header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    padding: 10px;
  }

Dans cet exemple :

• Le .header se comporte comme un élément normal jusqu'à ce qu'il atteigne le haut de la page. Après cela, il colle en haut et reste visible lorsque l'utilisateur fait défiler.

---

6. Indice Z

Lorsque les éléments sont positionnés (soit relatif, absolu, fixe ou collant), vous pouvez contrôler leur ordre d'empilement à l'aide de la propriété z-index. Des valeurs d'indice z plus élevées font apparaître les éléments au-dessus des valeurs inférieures.

• Exemple : Contrôle de l'ordre d'empilement.

  .box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1; /* Lower z-index */
    background-color: #f4f4f4;
    padding: 20px;
  }

  .box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 2; /* Higher z-index */
    background-color: #333;
    color: white;
    padding: 20px;
  }

Dans cet exemple :

• .box2 apparaîtra au-dessus de .box1 en raison de sa valeur d'index z plus élevée.

---

7. Combiner les techniques de positionnement

Vous pouvez combiner des valeurs de positionnement pour créer des mises en page avancées.

• Exemple : barre latérale fixe avec zone de contenu relative.

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #333;
    color: white;
    padding: 20px;
  }

  .content {
    position: relative;
    margin-left: 220px; /* Account for the fixed sidebar */
    padding: 20px;
  }

Dans cette mise en page :

• Die .sidebar ist links auf der Seite fixiert und bleibt beim Scrollen sichtbar.
• Der .content-Bereich wird relativ positioniert und passt seinen Rand an die Seitenleiste an.

---

Übungsübung

1. Erstellen Sie eine Webseite mit einer festen Kopf- und Fußzeile und verwenden Sie relative und absolute Positionierung für den Inhalt.
2. Fügen Sie eine klebrige Seitenleiste hinzu, die beim Scrollen fixiert wird.

---

Als Nächstes: In der nächsten Lektion befassen wir uns mit CSS-Transformationen und -Animationen, wo Sie lernen, wie Sie Ihre Webelemente ganz einfach animieren können. Machen Sie sich bereit, Ihre Designs dynamisch und interaktiv zu gestalten!

---

Folgen Sie mir auf LinkedIn
Ridoy Hasan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!