La position des éléments dans une page Web est un attribut important attribué par les développeurs. Si vos éléments ne sont pas placés correctement, cela peut sembler absurde ou désorganisé. Par conséquent, il est très important pour les développeurs d’attribuer judicieusement la position de chaque élément HTML.
Parfois, les éléments peuvent se chevaucher malgré l'attribution de leurs positions respectives. Ces éléments superposés peuvent être empilés les uns sur les autres et masquer d’autres éléments. Pour résoudre ce problème, CSS fournit la propriété z-index pour la conception Web. Dans cet article, nous découvrirons la propriété z-index de CSS. Nous discuterons également des différentes valeurs du z-index et des différences entre elles.
La propriété z-index de CSS permet aux développeurs de spécifier l'ordre des éléments qui se chevauchent sur l'axe z (c'est-à-dire à l'écran ou hors écran). Cependant, l'attribut z-index ne fonctionne que sur les éléments qui ont une valeur de position autre que statique spécifiée.
Le niveau de pile d'un élément HTML est déterminé par l'attribut z-index. La position d'un élément sur l'axe Z est appelée « niveau de pile » (par opposition à l'axe X ou à l'axe Y). Si la valeur est plus élevée, l'élément sera placé plus près du haut de l'ordre d'empilement. Cet agencement d'empilage est perpendiculaire à la fenêtre ou au moniteur.
L'ordre naturel d'empilement des composants sur l'axe Z dans une page HTML est affecté par divers facteurs. Il s'agit d'éléments avec un contexte d'empilement négatif, d'éléments non positionnés, non flottants, de niveau bloc, d'éléments non positionnés et flottants, d'éléments en ligne et d'éléments positionnés, le tout dans l'ordre d'affichage.
element{
z-index: values;
}
Voici les valeurs de cet attribut -
Auto - L'ordre qui se chevauche est le même que la valeur du parent. Il s'agit de la valeur par défaut.
Nombres- Les séquences qui se chevauchent sont spécifiées sous forme de nombres, tels que 1, 2, 3, etc.
Initial - Commande définie par défaut.
Héritage - L'ordre qui se chevauche est hérité par l'élément parent.
<!DOCTYPE html>
<html>
<head>
<title>z-index property</title>
<style>
.demo1{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 100px;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: #FFFF00;
position: absolute;
top: 100px;
left: 300px;
z-index: 2;
width: 200px;
}
</style>
</head>
<body>
<center>
<h2> z-index property </h2>
<div class= "demo1"> This is an example. </div>
<div class= "demo2"> This is an example. </div>
</center>
</body>
</html>
La valeur automatique de l'attribut z-index est le même ordre d'élément que l'élément parent.
<!DOCTYPE html>
<html>
<head>
<title>Auto value of z-index property</title>
<style>
.demo1{
font-family: verdana,'cursive';
background-color: #FFFF00;
position: absolute;
top: 120px;
z-index: auto;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 200px;
z-index: auto;
}
</style>
</head>
<body>
<center>
<h2>z-index property</h2>
<p class= "demo1"> This is an example. </p>
<p class= "demo2"> This is an example. </p>
</center>
</body>
</html>
La valeur zéro de l'attribut z-index est la valeur numérique de l'ordre des éléments. Spécifiez une valeur z-index de 0 pour créer du contenu empilé. Par exemple, si nous avons deux éléments element1 et element2, leurs indices z sont respectivement 1 et 0. Par conséquent, l’élément 1 sera empilé sur l’élément 2. Et si leurs indices z étaient respectivement de -1 et 0, l'élément 1 serait empilé sous l'élément 2. Considérez l'exemple suivant.
<!DOCTYPE html>
<html>
<head>
<title>Zero value of z-index property</title>
<style>
.demo1{
font-family: cursive, Cochin, Georgia;
background-color: #FF0000;
position: absolute;
top: 120px;
z-index: 0;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 100px;
left: 300px;
z-index: 0;
width: 200px;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h2>z-index property</h2>
<p class= "demo1">This is an example.</p>
<p class= "demo2">This is an example.</p>
</body>
</html>
La valeur de l'attribut z-index ne sera généralement pas la même que la valeur automatique.
<!DOCTYPE html>
<html>
<head>
<title>No value for z-index property</title>
<style>
.demo{
font-family: cursive, Cochin, Georgia;
background-color: #FFFF00;
position: absolute;
top: 120px;
}
</style>
</head>
<body>
<h2>z-index property</h2>
<p class= "demo">This is an example.</p>
</body>
</html>
Un sujet difficile consiste à empiler des contextes en CSS. Dans cet article, nous décrivons de manière exhaustive comment le contexte d'empilement sur une page Web est affecté par le z-index, qui, une fois parfaitement compris, se traduit par de puissantes propriétés CSS. Maintenant qu'ils connaissent cette fonctionnalité, les nouveaux développeurs devraient pouvoir l'utiliser efficacement et éviter certains problèmes courants qui peuvent survenir. Les développeurs avancés devraient également devenir plus conscients de la manière dont l'application appropriée de z-index peut résoudre divers problèmes de mise en page et fournir une variété d'options de conception CSS créatives.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
tutoriel d'exécution de code c++
Comment résoudre l'erreur de base de données Discuz
Quelle est la différence entre un pare-feu matériel et un pare-feu logiciel
évaluation python
Introduction aux composants Laravel
fermer le port
Comment résoudre trop de connexions
utilisation du descripteur de propriété
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
