Ordre d’empilement des éléments en CSS

Empiler des éléments dans l’ordre souhaité en CSS pourrait paraître facile avec z-index, on pourrait supposer qu’un z-index plus élevé permet d’afficher un élément devant ceux qui en possède un plus faible, mais les choses ne sont pas aussi simples que ça.

Quand les propriétés position et z-index ne sont pas utilisées, l’ordre d’empilement des éléments est simplement le même que l’ordre du HTML; mais si l’on utilise une position autre que static sur un élément, celui-ci et ceux qu’il contient vont s’afficher par dessus les autres éléments.

Avec z-index les choses se compliquent. Premièrement cela ne fonctionne que sur les éléments positionnés mais cela peut également créer des contextes d’empilements.

Contextes d’empilement

Les groupes d’éléments ayant un parent commun et qui bougent ensemble dans l’ordre d’empilement forment des contextes d’empilement. L’élément racine de ces contextes d’empilement est la clé pour bien positionner nos éléments dans l’ordre d’empilement global. Si cet élément racine est positionné derrière tous les autres éléments dans l’ordre global, ses éléments enfants n’ont aucun moyen d’être affichés par dessus d’autres éléments plus haut dans l’ordre d’empilement, et ce même avec un z-index bien supérieur.

De nouveaux contextes d’empilement sont créés lorsque l’on positionne des éléments (position autre que static), lorsqu’un élément a une opacité inférieure à 1 et lorsque l’on utilise des transforms, filters et autre propriétés qui viennent affecter le rendu d’un élément.

Déterminer l’ordre d’empilement

Au sein d’un même contexte

Voici les règles de base d’ordre d’affichage des éléments dans un même contexte :

      Élément racine du contexte
      Éléments positionnés et avec un z-index négatif
      Éléments non positionnés
      Éléments positionnés avec un z-index auto
      Éléments positionnés avec un z-index positif

Ordre global d’empilement

La clé ici est de savoir repérer quand un contexte d’empilement est créé afin de positionner correctement l’élément racine de ce contexte. Si vous jouer avec le z-index d’un élément et qu’il ne bouge pas dans l’ordre d’affichage, c’est certainement qu’il appartient à un contexte d’empilement, regardez alors quel élément parent crée ce contexte afin de la positionner de manière appropriée.

Source :philipwalton.com/articles/what-no-one-told-you-about-z-index/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *