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 vers la droite de 30px 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 (relatifs, absolus, fixes ou collants), 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 :

• Le .sidebar est fixé à gauche de la page et reste visible lors du défilement.
• La zone .content est positionnée de manière relative et ajuste sa marge pour tenir compte de la barre latérale.

Exercice pratique

1. Créez une page Web avec un en-tête et un pied de page fixes, et utilisez un positionnement relatif et absolu pour le contenu.
2. Ajoutez une barre latérale collante qui se fixe lors du défilement.

Prochaine étape : Dans la prochaine conférence, nous plongerons dans les Transformations et animations CSS, où vous apprendrez à animer facilement vos éléments Web. Préparez-vous à rendre vos créations dynamiques et interactives !

suivez-moi sur 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!