link W3C open

Comprendre la propriété z-index

#1 A quoi sert la propriété z-index ? open

On a vu dans dans le premier tutoriel sur le positionnement en CSS, le positionnement dans le flux, qu'une boîte pouvait recouvrir une autre boîte. Quand je dis boîte il s'agit de la boîte qui correspond à un élément HTML. Mais je préfère parler de boîte car c'est visuel.

Donc tout se passe comme si les boîtes étaient réparties sur des couches différentes qu'on peut voir comme des sortes de calques. La couche du dessus recouvrant bien évidemment les couches qui sont en dessous.

Si je veux maîtriser mon design il va falloir que je sache comment se répartissent les boîtes à travers ces couches et comment maîtriser tout ça 😎 .

Comment cà marche ? Il y a trois éléments à prendre en compte :

  1. Le premier c'est la nature du positionnement de la boîte. Est-elle dans le flux ? Est-elle positionnée ? On va voir qu'il y a des règles.
  2. Le deuxième c'est la valeur d'une propriété CSS qu'on appelle le z-index et qui permet certains réglages. Par exemple avec une certaine valeur de z-index je fais passer une boîte d'une couche vers une autre. On peut voir ça comme une sorte de coordonnée en z.
  3. Le troisième est lié à un mécanisme de création de contexte. Par exemple si vous positionnez un z-index sur un conteneur vous créez un contexte. Ensuite le z-index de toutes les boîtes que vous mettez dans ce conteneur sont comparées à la valeur du z-index de ce conteneur et à rien d'autre. Je détaillerai à la fin du tutoriel.

Les valeurs que peut prendre la propriété z-index sont les suivantes : auto la valeur par défaut ou un entier.

Il faut savoir que dans la plupart des cas l'utilisation du z-index est très simple. Dans d'autres cas ça peut devenir un casse tête.

#2 Comment sont réparties les boîtes à travers les couches ? open

En l'absence de déclaration de z-index, c'est le type de positionnement d'une boîte qui implique la couche sur laquelle la boîte sera placée.

Par défaut l'ordre (en partant de dessous) est le suivant :

  1. Le background de l'élément racine.
  2. La couche des boites des éléments qui sont dans le flux.
  3. La couche des boites des éléments qui sont positionnés en flottant (float:left; ou float:right;)
  4. La couche des boites des éléments qui sont positionnés (position:absolute; ou position:fixed; ou position:relative;).

On ne connaît pas la valeur du z-index attribuée en interne par le CSS pour ces différentes couches. Dans ces conditions pour nos valeurs utilisateurs on choisira des valeurs qui soient assez grandes 10 voir 100.

J'ai testé ces différents cas de figure. Vous avez le code ci-dessous.

Ordre d'empilement en l'absence de z-index
Tester le code

Lorsque plusieurs boîtes se retrouvent placées sur la même couche l'ordre d'empilement est le même que l'ordre d'apparition des éléments dans le code HTML (le dernier élément est sur le haut de la pile). Si vous voulez changer ça, vous devez :

  • soit déplacer une boîte d'une couche vers une autre en changeant son type de positionnement. C'est toujours possible mais ce n'est généralement pas ce que l'on fait.
  • soit "contredire" l'ordre d'apparition de la boîte dans le code en plaçant une déclaration de z-index avec une valeur bien choisie. C'est généralement ce que l'on fait.

Pour ça vous devez attribuer à la boîte que vous voulez placer au dessus une valeur de z-index plus élevé. Pour cela vous choisissez un entier positif plus élevé. Mais plus élevé que quoi ? Justement je vous l'ai dit au début on ne connaît pas les valeurs internes utilisées par le CSS alors commencez par une valeur au moins de 10. Si il y a un doute mettez plus 100 voir 1000.

#3 Les z-index c'est simple mais... open

Il faut faire attention à ce qu'un élément soit positionné pour que son z-index soit pris en compte. Dans l'exemple ci-dessous :

  1. La première boîte a un z-index de 100 qui n'est pas pris en compte car cette boîte n'est pas la boîte d'un élément positionnée. Je l'ai mis mais il ne sert à rien. Ce qui peut être dérangeant si on n'en est pas conscient 😉 .
  2. La deuxième boîte a un z-index de 20 qui est pris en compte car la boîte est positionnée en relative. Elle recouvre la première boîte mais ce n'est pas grâce au z-index. Le fait qu'elle soit positionnée relative est suffisant. (Attention je me suis fait piéger dans la vidéo 😕)
  3. Je place une troisième boîte positionnée elle aussi en relative mais cette fois avec un z-index de 10. Dans le code HTML elle est placée derrière mais elle a un z-index de 10. Par rapport au code HTML elle devrait être placée dessus la deuxième. Mais son z-index (10) inférieur à celui de la deuxième (20) va la placer en dessous de la deuxième.
Exemple d'utilisation du z-index
Tester le code

#4 Le contexte d'empilement open

Dans l'exemple ci-dessous le fait de mettre un z-index sur la boîte conteneur div-2 va entraîner la création d'un contexte d'empilement. Cette valeur de z-index devient une valeur de référence. C'est à cette valeur que les z-index des enfants du conteneur vont être comparés et à aucune autre.

Ci-dessous le z-index de div-3 (enfant de div-2) qui vaut 1000 est comparé au z-index de div-2 qui vaut 1. Il ne sera pas comparé au z-index de div-1. Ça veut dire qu'à partir du moment où vous mettez un z-index sur une boîte conteneur vous aller travailler avec les enfants uniquement par rapport à la couche du conteneur.

Il existe un certain nombre de situations dans lesquelles un nouveau contexte d'empilement est créé Spécification CSS22

Création d'un contexte empilement

Le code ci-dessous correspond à l'illustration ci-dessus

Tester le code