Quelle est la propriété Z-Index dans CSS?

Les feuilles de style en cascade (CSS) offrent une gamme de propriétés qui spécifient comment les éléments HTML apparaîtront sur les pages Web, par exemple, la propriété d'affichage définit le comportement d'affichage des éléments, la propriété de position spécifie la position des éléments, la propriété en arrière-plan fournit des antécédents couleur aux éléments, et la liste continue. Cet article est spécialement conçu pour souligner la signification de la propriété Z-Index dans CSS.

Dans HTML, les éléments ont un certain ordre d'empilement qui spécifie la disposition dans laquelle les éléments sont positionnés. La règle définie pour le positionnement de l'élément est que l'élément qui a un ordre d'empilement plus élevé est positionné devant l'élément avec un ordre d'empilement inférieur. Un ordre de pile d'un élément peut présenter des valeurs positives et négatives.

Quelle est la propriété Z-Index dans CSS

La propriété Z-Index définit l'ordre de pile des éléments HTML d'une manière qu'il spécifie quel élément sera affiché devant et quel élément est affiché en arrière-plan.

Syntaxe

Z-index: valeur;

La propriété Z-Index peut présenter certaines propriétés qui sont expliquées en détail ci-dessous.

Valeur	Description
auto	Cette valeur définit l'ordre des éléments de pile égaux à ceux de leurs éléments parents.
nombre	Cette valeur est utilisée pour donner manuellement une commande de pile à un élément. L'ordre de pile peut présenter des valeurs positives et négatives.
initial	Cette valeur définit l'ordre de pile d'un élément à sa valeur par défaut.
hériter	Cette valeur définit l'ordre de pile d'un élément en fonction des propriétés que l'élément a hérité de son élément parent.

Ici, nous avons illustré la propriété Z-Index à l'aide de quelques exemples.

Exemple 1

Supposons que vous souhaitiez fournir une image d'arrière-plan sur votre site Web et que vous souhaitez que vos autres éléments soient affichés devant cette image. Utilisez l'extrait de code suivant.

Html

La promenade du matin est bénéfique pour la santé

Dans l'exemple ci-dessus, il y a deux éléments

élément et l'autre est un élément.

CSS

H2
Position: relative;
Gauche: 200px;
En haut: 0px;

img
Z-Index: -1;
Position: absolue;
Gauche: 200px;
En haut: 0px;

L'élément est positionné en arrière-plan du

élément car la propriété z-index affectée à l'élément est -1. De plus, le

L'élément est relativement positionné à 200px de la gauche et 0px du haut, tandis que l'élément a une position absolue qui signifie qu'elle sera placée à 200px de la gauche et 0px du haut, par rapport à la position de son élément ancêtre .

Sortir

Voici une sortie de l'exemple ci-dessus.

Les deux éléments ont réussi à empiler.

Maintenant, si nous supprimons la valeur de l'indice Z de l'élément, alors le sera placé devant le

élément car est défini dernier dans le flux de documents.

img
/ * z-index: -1; * /
Position: absolue;
Gauche: 200px;
En haut: 0px;

Sortir

Maintenant le

L'élément est placé derrière l'élément.

Exemple 2

Dans cet exemple, nous avons démontré l'utilisation de la valeur positive de l'indice Z, en outre, dans cet exemple, nous avons illustré comment placer un élément derrière un certain élément. Ici, deux éléments sont créés.

Html

Div 1
Div 2

Le premier div a une position relative qui signifie qu'elle sera positionnée 20px à partir de gauche et 10px de la première par rapport à sa position d'origine, en outre, nous lui avons attribué une valeur d'indice Z de 1.

.div1
Z-Index: 1;
Position: relative;
Gauche: 20px;
En haut: 10px;
Border: 3px gris massif;
hauteur: 100px;
Largeur: 300px;

Pour le deuxième div, nous lui avons attribué une position absolue, ce qui signifie qu'il sera placé à 100px de la gauche et 60 px du haut par rapport à la position de son élément parent.

.div2
Position: absolue;
Gauche: 100px;
En haut: 60px;
Color en arrière-plan: Indianred;
hauteur: 80px;
Largeur: 200px;

Sortir

Div 2 avec succès empilé derrière Div 1.

Points à retenir!

1. Vous devez définir la position des éléments, sinon la propriété Z-Index ne fonctionnera pas. (Les éléments peuvent avoir des positions absolues, relatives, fixes ou collantes).

2. Sans spécifier la propriété Z-Index, si deux éléments se tournent les uns sur les autres, alors l'élément défini en dernier dans l'écoulement du document est positionné devant l'autre élément.

Conclusion

La propriété Z-Index est utilisée pour définir l'ordre d'empilement des éléments HTML, ce qui signifie qu'il spécifie l'arrangement des éléments affichés sur la page Web. La propriété Z-Index présente quatre valeurs qui sont; Auto qui définit l'ordre de pile des éléments égaux à ceux de leurs éléments parents, le nombre est utilisé pour donner manuellement un ordre de pile à un élément, définit initial l'ordre de pile d'un élément à sa valeur par défaut, et hériter définit l'ordre de pile d'un élément selon les propriétés que l'élément a hérité de son élément parent. Ce message traite de la propriété Z-Index en profondeur à l'aide d'exemples appropriés.