DEVENIR-WEBMASTER.COM Log In
 24
link W3C close

Comprendre la propriété z-index

Visiter ma chaine Youtube

# Les valeurs que peut prendre la propriété z-index close

On a vu qu'une boîte pouvait recouvrir une autre boîte. Tout se passe comme si les boîtes étaient réparties sur des couches différentes. La couche de dessus recouvrant celles de dessous.

Les valeurs que peut prendre z-index sont les suivantes :

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

En l'absence 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 flottants.
  4. La couche des boites des éléments qui sont positionnés.

Demo ici

Lorsque plusieurs boîtes se retrouvent placées sur la même couche c'est celles qui apparaissent en dernier dans le code HTML qui sont placées par dessus.

Autrement dit l'ordre d'empilement et le même que l'ordre d'apparition dans le code.

Les programmeurs vont donc avoir besoin soit de déplacer une boîte d'une couche vers une autre soit "de contredire" l'ordre d'apparition de la boîte dans le code.

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 plus élevé.

# z-index simple mais... close

Les éléments doivent être positionnés

Attention toutefois car seuls les éléments positionnés acceptent une valeur de z-index. Dans cet exemple j'ai dû positionner la première boîte pour que la valeur soit prise en compte.

Code HTML de l'exemple de z-index
Code CSS de l'exemple de z-index

Le contexte d'empilement

Dans cet exemple le fait de mettre un z-index sur la boîte div-2 va entraîner la création d'un contexte d'empilement.

Une valeur de référence est créée. C'est à cette valeur que les z-index des enfants vont être comparés.

Création d'un contexte empilement

Ici 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