Contexte de superposition

2.1 Propriété z-index

Contexte de superposition en CSS est géré par la propriété z-index et définit comment les éléments se superposent sur l'axe Z (la troisième coordonnée, perpendiculaire à l'écran). Comprendre et utiliser correctement z-index et le contexte de superposition permet de créer des mises en page complexes et dynamiques avec des éléments superposés.

Principes du contexte de superposition

Le contexte de superposition détermine comment les éléments seront affichés les uns sur les autres. Chaque élément sur une page web a un niveau de superposition, qui peut être modifié grâce à la propriété z-index.

Règles de superposition

1. Position dans l'arbre du document : les éléments qui se trouvent plus bas dans l'arbre du document se superposent aux éléments qui se trouvent plus haut.
2. Propriété z-index : les éléments avec une valeur de z-index plus grande se superposent aux éléments avec une valeur de z-index plus petite.

Principes de z-index

La propriété z-index définit l'ordre de superposition des éléments lorsqu'ils se chevauchent. Les éléments avec une valeur de z-index plus grande sont affichés au-dessus des éléments avec une valeur plus petite. z-index s'applique uniquement aux éléments avec un positionnement (position: relative, absolute, fixed ou sticky).

Syntaxe :

    
      .element {
        position: relative; /* ou absolute, fixed, sticky */
        z-index: number;
      }
    
  

Où :

• number : un nombre entier qui peut être positif ou négatif. Plus la valeur est grande, plus l'élément sera haut dans l'ordre de superposition

Exemple d'utilisation de z-index :

Dans cet exemple, Box 2 avec z-index: 2; sera affiché au-dessus de Box 1 et Box 3, et Box 1 sera affiché au-dessus de Box 3.

    
      .wrapper {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }

      .box3 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: green;
      }
    
  

    
      <div class="wrapper">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
      </div>
    
  

2.2 Contexte de superposition (stacking context)

Contexte de superposition — c'est un groupe d'éléments qui sont considérés comme un tout lors de la détermination de l'ordre de superposition. Un contexte de superposition est créé lorsque certaines conditions sont remplies, comme l'application d'un z-index avec un positionnement ou d'autres propriétés CSS.

Création d'un contexte de superposition

Un contexte de superposition est créé dans les cas suivants :

1. L'élément a un positionnement relative, absolute, fixed ou sticky et une valeur de z-index différente de auto.
2. L'élément a une propriété opacity avec une valeur inférieure à 1.
3. L'élément a une propriété transform, filter, perspective, clip-path, mask ou mask-image différente de la valeur par défaut.
4. L'élément a une propriété contain avec une valeur layout, paint, ou strict.

Exemple de création de contexte de superposition :

    
      .parent {
        position: relative;
        z-index: 10;
        min-height: 300px;
        padding: 20px;
        color: white;
        background-color: #f1c40f;
      }

      .child-blue {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 50px;
        min-width: 125px;
        min-height: 125px;
        background-color: #3498db;
      }

      .child-red {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        min-width: 125px;
        min-height: 125px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="parent">
        Élément parent
        <div class="child-blue">1</div>
        <div class="child-red">2</div>
      </div>
    
  

Explication du code :

• .parent : élément avec position: relative; et z-index: 10;, qui crée un nouveau contexte de superposition
• .child-blue : élément avec position: absolute; et z-index: 1;, qui se trouve dans le nouveau contexte de superposition créé par l'élément parent
• .child-red : élément avec position: absolute; et z-index: 2;, qui se trouve également dans le nouveau contexte de superposition créé par l'élément parent, et sera placé au-dessus de .child-blue

2.3 Interaction des contextes de superposition

Les éléments à l'intérieur d'un même contexte de superposition ne peuvent pas être superposés aux éléments d'un autre contexte de superposition, sauf si l'ordre des contextes eux-mêmes est modifié. Cela signifie que les éléments avec un z-index plus élevé à l'intérieur d'un même contexte de superposition seront toujours affichés au-dessus des éléments avec un z-index plus bas dans le même contexte.

Exemple d'interaction des contextes de superposition :

    
      .wrapper {
        min-height: 500px;
      }

      .container1 {
        position: relative;
        z-index: 10;
        padding: 20px;
        margin-bottom: 200px;
        background-color: lightgrey;
      }

      .container2 {
        position: relative;
        z-index: 20;
        padding: 20px;
        background-color: lightpink;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: 1;
        top: 50px;
        left: 50px;
        background-color: red;
      }

      .box2 {
        z-index: 2;
        top: 100px;
        left: 100px;
        background-color: blue;
      }
    
  

    
      <div class="wrapper">
        <div class="container1">
          <div class="box box1">Box 1</div>
          <div class="box box2">Box 2</div>
        </div>

        <div class="container2">
          <div class="box box1">Box 3</div>
          <div class="box box2">Box 4</div>
        </div>
      </div>
    
  

Dans cet exemple, le conteneur .container2 avec z-index: 20; sera affiché au-dessus du conteneur .container1 avec z-index: 10;. Les éléments à l'intérieur de chaque conteneur seront organisés en fonction de leur z-index, mais ne se chevaucheront pas avec les éléments d'un autre conteneur.

2.4 Valeurs négatives de z-index

z-index peut prendre des valeurs négatives, ce qui permet de placer des éléments sous d'autres éléments avec une valeur de z-index nulle ou positive.

    
      .container {
        min-height: 300px;
      }

      .box {
        position: absolute;
        min-width: 125px;
        min-height: 125px;
        color: white;
      }

      .box1 {
        z-index: -1;
        top: 100px;
        left: 100px;
        background-color: #3498db;
      }

      .box2 {
        z-index: 0;
        top: 150px;
        left: 150px;
        background-color: #e74c3c;
      }
    
  

    
      <div class="container">
        <div class="box box1">-1</div>
        <div class="box box2">0</div>
      </div>
    
  

Explication du code :

• .box1 : Élément avec z-index: -1;, qui sera placé sous l'élément avec z-index: 0;

Conseils pour l'utilisation de z-index :

• Minimisez l'utilisation de z-index : essayez d'utiliser z-index uniquement lorsque c'est vraiment nécessaire. Cela aide à éviter des structures de superposition complexes et déroutantes
• Créez des contextes de superposition de manière réfléchie : la création de nouveaux contextes de superposition aide à gérer la superposition des éléments, mais peut compliquer la structure du document
• Utilisez des valeurs de z-index sémantiquement significatives : assignez des valeurs de z-index de manière réfléchie, par exemple, utilisez des valeurs positives pour les éléments supérieurs et négatives pour les inférieurs