z-index
- z-index表示谁压盖着谁，数值大的会压盖住数值小的。
- 只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位了的元素，才会拥有z-index
- z-index的值是没有单位的，值是一个正整数，默认的z-index值是0
- 如果多个定位元素没有设置z-index属性，或者z-index设置一样，那么卸载HTML后面的定位元素就会压盖住前面的定位元素
案例一：z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
/*.div1和.div2都设置了绝对定位，所以他们就是拥有了z-index属性，但是并没有给其设置z-index属性，那么他们的值就是0。
我们观察HTML中的结构.div2这个元素它写在.div1前面，然后就能知道.div2会压盖住.div1
*/
.div1{
background-color: #f00;
/*绝对定位*/
position: absolute;
left: 100px;
top: 100px;
}
.div2{
background-color: #00f;
/*绝对定位*/
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
.div1和.div2都设置了绝对定位，所以他们就是拥有了z-index属性，但是并没有给其设置z-index属性，那么他们的值就是0。
我们观察HTML中的结构.div2这个元素它写在.div1前面，然后就能知道.div2会压盖住.div1
案例二：设置z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置z-index</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
/*不设置z-index，应该是div2遮住div1，因为在HTML结构中div2写在后面，默认z-index都是0
设置z-index后，数值大的显示在上面，所以是div1遮住div2
*/
.div1{
background-color: #f00;
/*绝对定位*/
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
}
.div2{
background-color: #00f;
/*绝对定位*/
position: absolute;
left: 200px;
top: 200px;
z-index: 1;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
不设置z-index，应该是div2遮住div1，因为在HTML结构中div2写在后面，默认z-index都是0
设置z-index后，数值大的显示在上面，所以是div1遮住div2
案例三：z-index属性在工作中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index属性在工作中使用</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 100%;
height: 60px;
background-color: #222222;
/*使用固定定位*/
position: fixed;
left: 0px;
top: 0px;
/*设置z-index*/
/*不设置z-index的话，下面的p标签的内容会遮挡住导航栏*/
z-index: 99999999;
}
.nav .inner_c{
width: 1000px;
height: 60px;
margin: 0px auto;
background-color: #f00;
}
ul{
/*清除无序列表前面的项目符号*/
list-style: none;
}
ul li{
/*左浮动*/
float: left;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
}
ul li a{
display: block;
width: 100px;
height: 60px;
text-decoration: none;
color: white;
font-weight: bold;
}
ul li a:hover{
background-color: gold;
}
body{
padding-top: 60px;
}
p{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #f00;
/*相对定位*/
position: relative;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<ul>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
</ul>
</div>
</div>
<img src="../img/jyff.JPG" alt="">
<img src="../img/jyff.JPG" alt="">
<img src="../img/jyff.JPG" alt="">
<p>看看我在哪里</p>
<img src="../img/jyff.JPG" alt="">
<img src="../img/jyff.JPG" alt="">
</body>
</html>
