recherche

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

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-25 03:47:11132parcourir

How Does CSS z-index Control the Stacking Order of HTML Elements?

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!

css less html Static using Property position Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment puis-je créer un pied de page collant qui reste en bas de la page ou du contenu, selon celui qui est le plus bas ?Article suivant：Comment puis-je créer un pied de page collant qui reste en bas de la page ou du contenu, selon celui qui est le plus bas ?

Articles Liés

Voir plus