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!