Ordre d'empilement - noelno/dovelei GitHub Wiki

#tl;dr Selon l'ordre d'apparition dans le HTML mais surtout selon l'utilisation de certaines propriétés CSS (qui sont loin de se limiter à z-index !), des contextes d'empilement peuvent être crées et changer l'étendue de la valeur z-index, ce qui peut provoquer des résultats déroutants pour ceux qui ne connaissent pas le principe du contexte d'empilement en HTML.

#Empilement Dans le code HTML il arrive bien souvent que des éléments se superposent. On parle d'empilement des éléments. Ces éléments s'affichent selon un ordre bien défini, généralement de la racine <html> aux descendants.

Le bas de la pile est le plus éloigné de l'utilisateur, juste avant le fond (canvas). Le haut de la pile est la plus en avant. Plus la valeur de l'indice z d'un élément est élevée, plus l'élément est en haut de la pile.

L'ordre d'empilement des éléments est défini dans les spécifications. Pour chaque élément s'affiche d'abord sa couleur d'arrière-plan (background-color), puis son image d'arrière-plan (background-image) et enfin ses bordures. Dans le cas des éléments de rendu table, s'affiche dans l'ordre le fond du table, puis celui des table-column-group, des table-column, des table-row-group, des table-row et des table-cell (de la racine aux enfants), et à la fin les bordures de table.

#Ordre d'empilement Tous les éléments dans un contexte d'empilement se superposent dans cet ordre (fond puis bordures, dans l'ordre du DOM par défaut) :

  1. Élément racine (<html>)
  2. Elements positionnés (display différent de static) possédant des z-index négatifs et leurs enfants, dans l'ordre de la valeur du z-index
  3. Elements blocs non positionnés
  4. Elements flottants non positionnés
  5. Elements de type en ligne (display inline, inline-table, inline-block...) générant un contexte d'empilement, et leurs enfants
  6. Elements de type en ligne ne générant pas de contexte d'empilement
  • d'abord le contenu embarqué
  • ensuite le texte
  • enfin l'outline
  1. Éléments positionnés avec un z-index valant auto (valeur par défaut) ou 0, et leurs enfants
  • Si z-index vaut auto, ses descendants se comportent comme s'ils étaient dans un contexte d'empilement (VIII). S'il y a réellement un contexte d'empilement dans sa descendance, l'élément racine reste le véritable élément ayant crée le contexte et pas l'élément z-index: auto
  1. Elements de type bloc (display block, table, list-item...) générant un contexte d'empilement, et leurs enfants

On notera que seuls les éléments non positionnés n'ont pas d'impact sur l'index d'affichage de leurs enfants, tous les autres éléments génèrent des contextes d'empilement.

Les éléments ayant un z-index de même valeur dans le même contexte d'empilement sont départagés par leur ordre d'apparition dans le DOM.

Pour les nœuds textes, ils s'affichent dans l'ordre suivant :

  1. Le souligné
  2. Le surligné
  3. Le texte lui-même
  4. Le barré

Le contenu embarqué rendu en ligne s'affiche devant le texte.

#Contexte d'empilement Un contexte d'empilement est un périmètre bien délimité d'éléments s'empilant. Cette zone est crée par un élément, l'élément racine, ayant des propriétés spéciales citées plus bas.
La particularité du contexte d'empilement, c'est qu'il englobe l'élément racine et sa descendance à un même niveau. Des éléments hors de ce contexte peuvent se placer devant ou derrière ce contexte, mais pas en plein milieu par exemple.
On peut cependant changer l'ordre d'empilement d'éléments du même contexte, sauf pour l'élément racine qui reste à la racine.

Les propriétés générant un contexte d'empilement sur un élément :

  • Elements positionnés + z-index (position différente de static et un z-index supérieur à 0)
  • Elements avec une transparence (opacity inférieure à 1)
  • Elements transformés (transform différent de none)
  • transform-style vaut preserve-3d
  • filter différent de none
  • Elements enfants de Flexbox avec un z-index différent de auto
  • Elements utilisant au moins l'une des propriétés suivantes : clip-path, mask, mask-image...

##Sources

⚠️ **GitHub.com Fallback** ⚠️