Maison > Article > interface Web > Qu'est-ce que l'attribut z-index ?
Qu'est-ce que l'attribut z-index ?
- 藏色散人original
- 2021-04-19 11:51:5120419parcourir
L'attribut z-index est un attribut en CSS utilisé pour définir l'ordre d'empilement des éléments. Les éléments avec un ordre d'empilement supérieur seront toujours devant les éléments avec un ordre d'empilement inférieur, et les éléments peuvent avoir un ordre d'empilement négatif. Valeur de l'attribut z-index.
L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3, version css3.
L'attribut z-index définit l'ordre d'empilement des éléments. Les éléments avec un ordre d'empilement supérieur apparaîtront toujours devant les éléments avec un ordre d'empilement inférieur.
Remarque : les éléments peuvent avoir des valeurs d'attribut z-index négatives.
Remarque : Z-index ne fonctionne que sur les éléments positionnés (tels que position:absolute ;) !
Description
Cette propriété définit la position d'un élément positionné le long de l'axe z, qui est défini comme l'axe qui s'étend verticalement jusqu'à la zone d'affichage. S'il s'agit d'un nombre positif, il est plus proche de l'utilisateur, et s'il s'agit d'un nombre négatif, il est plus éloigné de l'utilisateur.
Par défaut : auto
Héritage : non
Version : CSS2
Syntaxe JavaScript : object.style.zIndex="1"
Valeurs possibles
auto par défaut. L'ordre d'empilement est égal à celui de l'élément parent.
numéro définit l'ordre d'empilement des éléments.
inherit spécifie que la valeur de l'attribut z-index doit être héritée de l'élément parent.
[Apprentissage recommandé : Tutoriel vidéo CSS]
Exemple
Définir le z-index de l'image :
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" / alt="Qu'est-ce que l'attribut z-index ?" >
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html> Effet :
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!