Gérer z-index dans votre code - nuls

Lorsque vous utilisez le positionnement absolu, vous pouvez déterminer exactement où les objets sont placés, il est donc possible qu'ils se chevauchent. Par défaut, les éléments décrits plus loin dans HTML sont positionnés au-dessus des éléments décrits précédemment.

Profondeur de traitement en CSS

Vous pouvez utiliser un attribut CSS spécial appelé z-index pour modifier ce comportement par défaut. L'axe z fait référence à la proximité d'un élément avec le spectateur. Cette image montre comment cela fonctionne.

L'index z-index vous permet de changer les éléments les plus proches de l'utilisateur.

L'attribut z-index requiert une valeur numérique. Des nombres plus élevés signifient que l'élément est plus proche de l'utilisateur (ou sur top). Toute valeur pour z-index place l'élément plus haut que les éléments avec le z-index par défaut. Cela peut être très utile lorsque vous avez des éléments que vous souhaitez afficher au-dessus d'autres éléments (par exemple, des menus qui apparaissent temporairement au-dessus d'un autre texte).

Voici le code illustrant l'effet z-index :

zindex. html

#blueBox {

couleur de fond: bleu;

largeur: 100 px;

hauteur: 100px;

position: absolue;

à gauche: 0px;

en haut: 0px;

marge: 0px;

indice-z: 1;

}

#blackBox {

couleur de fond: noir;

largeur: 100 px;

hauteur: 100px;

position: absolue;

à gauche: 50px;

en haut: 50px;

marge: 0px;

}

Travailler avec z-index

Le seul changement dans ce code est l'ajout de la propriété z-index . Plus la valeur de l'index z est élevée, plus cet objet semble proche de l'utilisateur.

Voici deux choses à garder à l'esprit lorsque vous utilisez z-index :

• Un élément peut en cacher un autre. Lorsque vous commencez à positionner les choses absolument, un élément peut sembler disparaître parce qu'il est complètement couvert par un autre. L'attribut z-index est un bon moyen de vérifier cette situation.
• Le index négatif peut être problématique. La valeur de z-index devrait être positive. Bien que les valeurs négatives soient supportées, certains navigateurs (notamment les anciennes versions de Firefox) ne les traitent pas bien et peuvent faire disparaître votre élément.
• Il est préférable de donner à toutes les valeurs un z-index . Si vous définissez le z-index pour certains éléments et laissez le z-index indéfini pour les autres, vous n'avez aucune garantie de ce qui va arriver. En cas de doute, donnez à chaque valeur son propre z-index , et vous saurez exactement ce qui devrait se chevaucher.
• Ne donnez pas le même z-index à deux éléments. Le point de z-index est de définir clairement quel élément doit apparaître plus proche. Ne pas vaincre cet objectif en affectant la même valeur z-index à deux éléments différents sur la même page.