Comment CSS z-index affecte-t-il l'ordre d'empilement des éléments ?

Comprendre l'ordre d'empilement des éléments CSS

En CSS, la propriété z-index joue un rôle crucial dans la détermination de l'ordre d'empilement des éléments , mais il peut être déroutant de comprendre comment il interagit avec différentes propriétés de positionnement.

Comment l'ordre d'empilement Travaux

L'ordre d'empilement fait référence à la profondeur relative des éléments superposés sur une page Web. Les éléments avec des valeurs d'indice z plus élevées apparaissent devant les éléments avec des valeurs plus faibles. Cependant, le z-index ne s'applique qu'aux éléments positionnés (c'est-à-dire les éléments avec une position : absolue, relative, fixe ou collante).

Interaction avec les éléments positionnés et non positionnés

• Les éléments non positionnés (position : statique) sont toujours empilés en dessous des éléments positionnés.
• Si non Le z-index est spécifié pour les éléments positionnés, ils suivent l'ordre d'empilement par défaut en fonction de l'ordre du code source.
• Si les valeurs du z-index sont appliquées, les éléments positionnés sont empilés en fonction de ces valeurs, quel que soit leur code source. ordre.
• Les éléments avec des valeurs d'index z négatives apparaissent derrière l'arrière-plan et les bordures de l'élément racine.

Empilage Contextes

Un contexte d'empilement est une zone rectangulaire dans le document qui sert de conteneur pour les éléments positionnés. Une fois qu'un élément est positionné et qu'un z-index est appliqué, il crée un nouveau contexte d'empilement qui sépare ses éléments enfants des autres contextes d'empilement.

Implications pour les types d'éléments mixtes

1. Éléments frères et sœurs mixtes :

• Si les éléments frères et sœurs ont des positions différentes (mixtes positionnés et non positionnés), les éléments positionnés avec des valeurs d'index z seront toujours empilés devant les éléments non positionnés. .
• Si les deux éléments frères sont positionnés avec des valeurs d'index z, l'élément avec la valeur la plus élevée apparaîtra dans devant.

2. Éléments frères et sœurs imbriqués et mixtes :

• Si un élément parent positionné contient à la fois des éléments enfants positionnés et non positionnés :

  • Les éléments enfants positionnés sont empilés dans le contexte d'empilement du parent.
  • Les éléments enfants non positionnés sont empilés sous l'élément parent positionné, quel que soit tout z-index valeurs.
• Si des éléments positionnés imbriqués ont des valeurs d'index z contradictoires, l'élément avec la valeur la plus élevée dans le contexte d'empilement le plus interne apparaîtra devant.

Exemple

Considérez le HTML suivant code :

<div>
  <div>

Dans cet exemple, la boîte 1 apparaîtra devant la boîte 2 car elle a un z-index plus élevé dans le contexte d'empilement créé par son div parent. La case 2, étant à la fois positionnée et ayant un z-index inférieur, apparaîtra derrière la case 1.

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!