Detailed explanation of z-index in CSS (2)-CSS Tutorial-php.cn

Detailed explanation of z-index in CSS (2)

零下一度

Release： 2017-05-12 14:15:50

Original

1559 people have browsed it

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>

Copy after login

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>

Copy after login

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!