Comment CSS z-index contrôle-t-il l'ordre d'empilement des éléments HTML ?

Comprendre l'ordre d'empilement du z-index

Positionnement des éléments avec z-index

La propriété z-index en CSS détermine l'ordre d'empilement des éléments positionnés . Plus précisément, il dicte quels éléments apparaissent devant ou derrière les autres sur l'axe z, ce qui représente la profondeur sur un plan tridimensionnel.

Effets sur les éléments positionnés

L'index Z ne fonctionne que sur des éléments avec une position autre que statique (c'est-à-dire absolue, relative, fixe ou collante). Cela n'affecte pas les éléments avec une position statique ou les éléments positionnés à l'aide de flottants.

Contextes d'empilage

Un contexte d'empilement est créé lorsqu'un élément est positionné et auquel un z-index est appliqué. Dans un contexte d'empilement, la propriété z-index définit l'ordre d'empilement de l'élément positionné et de ses descendants. Les contextes d'empilement empêchent les éléments d'un contexte d'interférer avec l'ordre d'empilement des éléments dans un contexte différent.

Règles d'ordre d'empilement

L'ordre d'empilement des éléments sans z-index spécifié est le suivant :

1. Arrière-plans et bordures de l'élément racine
2. Bloc non positionné et non flottant éléments
3. Éléments flottants non positionnés
4. Éléments en ligne
5. Éléments positionnés

Lorsqu'une propriété z-index est appliquée, l'ordre d'empilement est modifié :

1. Arrière-plans et bordures de la racine element
2. Éléments positionnés avec un z-index inférieur à 0
3. Éléments de bloc non positionnés et non flottants
4. Éléments flottants non positionnés
5. Éléments en ligne
6. Éléments positionnés avec un z-index de 0
7. Éléments positionnés avec un z-index supérieur à 0

Exemples d'ordre d'empilement

Frères et sœurs mixtes

s avec et sans position :

• div.sibling-1 a la position : statique et z-index : 0
• div.sibling-2 a la position : absolue et z-index : 1

Résultat : div.sibling-2 apparaîtra devant div.sibling-1 car son z-index est plus élevé.

Imbriqué

s avec frère

s :

• div.container a la position : statique et z-index : 0

  • div.child-1 a la position : statique et z-index : 0
  • div.child-2 a la position : absolue et z-index : 1
• div.sibling a la position : relative et z-index : 2

Résultat : div. le frère ou la sœur apparaîtra devant les deux div enfants car il est positionné avec un z-index plus élevé dans un contexte d'empilement différent.

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!