La spécification du niveau dans l'empilement

Publié le 26 mars 2005 par Led Ganache

la propriété 'z-index'

'z-index'

Valeur :	auto \| <entier> \| inherit
Initiale :	auto
S'applique à :	ceux des éléments positionnés
Héritée :	non
Pourcentage :	sans objet
Médias :	visuel

Pour une boîte positionnée, la propriété 'z-index' spécifie :

Le niveau dans l'empilement pour une boîte dans un contexte d'empilement donné ;
L'établissement par une boîte d'un contexte d'empilement local.

Voici les significations des valeurs :

<entier>: Cet entier correspond au niveau dans l'empilement d'une boîte générée dans un contexte d'empilement donné. Cette boîte établit également un contexte d'empilement local dans lequel la valeur de son niveau est '0' ;
auto: Le niveau d'empilement de la boîte générée dans un contexte d'empilement donné est le même que celui de la boîte de son parent. Cette boîte n'établit pas un nouveau contexte d'empilement local.

Dans l'exemple suivant, les niveaux dans l'empilement des boîtes (nommées à partir de leur attribut "id") sont : "texte2"=0, "image"=1, "texte3"=2 et "texte1"=3. Le contexte d'empilement de "texte2" est hérité de la boîte racine. Les niveaux des autres boîtes étant spécifiés par la propriété 'z-index'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Positionnement selon l'axe-z</TITLE> <STYLE type="text/css"> .pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; } </STYLE> </HEAD> <BODY> <P> <IMG id="image" class="pile" src="butterfly.gif" alt="L'image d'un papillon" style="z-index: 1"> <DIV id="texte1" class="pile" style="z-index: 3"> Ce texte se surimposera à l'image du papillon. </DIV> <DIV id="texte2"> Ce texte sera en-dessous de tout. </DIV> <DIV id="texte3" class="pile" style="z-index: 2"> Ce texte se trouvera sous texte1, mais se surimposera à l'image du papillon. </DIV> </BODY> </HTML>

Cet exemple illustre la notion de transparence. Par défaut, une boîte laisse voir celles situées en arrière à travers les zones transparentes de son contenu. Ici, chacune des boîtes vient recouvrir celles en dessous de façon transparente. On peut annuler ce comportement en employant l'une des propriétés d'arrière-plan.