Maison > interface Web > tutoriel CSS > le corps du texte

Explication détaillée de z-index en CSS (2)

零下一度
Libérer: 2017-05-12 14:15:50
original
1580 Les gens l'ont consulté

Explication détaillée du z-index en CSS Quel serait le résultat s'il n'y avait pas de z-index ? L'éditeur vous amènera à y jeter un œil.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
top: 100px;
left: 100px;
}
.box2{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
top: 180px;
left: 180px;
}
</style>
</head>
<body>
<p class="box1">box1</p>
<p class="box2">box2</p>
</body>
</html>
Copier après la connexion

Résultat d'exécution :

Explication détaillée de z-index en CSS (2)

Puisque box2 est derrière box1, box2 sera supprimé sans définir le z-index box1.

Voyons ensuite quel est le phénomène parent ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.p1{
position: relative;
width: 200px;
height: 200px;
background-color: blue;
z-index: 10
}
.p1 .child1{
position: absolute;
width: 100px;
height: 100px;
top: 240px;
left: 300px;
z-index: 56;
background-color: green;
}
.p2{
position: relative;
width: 200px;
height: 200px;
background-color:red;
z-index: 20;
}
.p2 .child2{
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 350px;
z-index: 5;
background-color: pink;
}
 
 
</style>
</head>
<body>
<p class="p1">
<p class="child1"></p>
</p>
<p class="p2">
<p class="child2"></p>
</p>
</body>
</html>
Copier après la connexion

Résultat d'exécution :

Explication détaillée de z-index en CSS (2)

Ici, nous définissons l'indice z de p2 pour qu'il soit plus petit que l'indice z de p1, et définissons le z-index de l'élément enfant de p1 child1 Le z-index est supérieur au z-index de child2, l'élément enfant de p2. Mais le résultat final de l’opération est que child2 supprime child1. C'est le phénomène de l'obéissance au père. C'est si l'élément parent est supprimé. Les sous-éléments ne peuvent échapper au sort d’être supprimés. Quelle que soit la taille du z-index de l’élément enfant.

[Recommandations associées]

1. Tutoriel vidéo CSS en ligne gratuit

2. Manuel CSS en ligne

3. php.cn Dugu Jiujian (2) - tutoriel vidéo CSS

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal