Home > Article > Web Front-end > Detailed explanation of z-index in CSS (2)

Detailed explanation of z-index in CSS (2)

零下一度Original: 2017-05-12 14:15:501571browse

Detailed explanation of z-index in CSS. If there is no z-index, what will be the result? The editor will take you to take a look.

<!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>

Running result:

Detailed explanation of z-index in CSS (2)

Since box2 is behind box1, box2 will suppress box1 if z-index is not set.

Next let’s take a look at what is the parent phenomenon?

<!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>

Run results:

Detailed explanation of z-index in CSS (2)

Here we set the z-index of p2 to be smaller than the z-index of p1, and set the z-index of the child element child1 of p1 The index is greater than the z-index of child2, the child element of p2. But the final result of the operation is that child2 suppresses child1. This is the phenomenon of obedience to the father. That is if the parent element is suppressed. Sub-elements cannot escape the fate of being suppressed. Regardless of the z-index size of the child element.

【Related recommendations】

1. Free css online video tutorial

2. css online manual

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Detailed explanation of z-index in CSS (2). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share the effect code of a CSS3 circle zoom-in and zoom-out loop animationNext article：Share the effect code of a CSS3 circle zoom-in and zoom-out loop animation

See more

Detailed explanation of z-index in CSS (2)

Related articles