z-index 显示的层叠关系，数字越大越在上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding-top: 80px; /*从80px以下显示*/
} .header{
width: 100%;
height: 80px;
background-color: red;
position: fixed;
top:0;
z-index: 99999; /*z-index最大，始终显示在上面*/
}
.wrap{
width: 100%;
height: 500px;
background-color: green;
color: #fff;
}
.wrap p{
position: relative;
z-index: 3;
} </style>
</head>
<body style="height: 2000px;"> <div class="header"></div> <div class="wrap">
<p>内容区域</p> //最终结果 ：滑动滚动条，会被导航栏盖住
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
z-index: 12; }
.sendie{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 270px;
left: 320px;
/*z-index: 10;*/
}
.father2{
width: 300px;
height: 300px;
border: 1px solid green;
position: relative;
z-index: 11;
}
.tailiang{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: -30px;
left: 320px;
/*z-index: 5;*/
}
</style>
</head>
<body style="height: 2000px"> <div class="father">
<div class="sendie">
</div>
</div> <div class="father2">
<div class="tailiang"></div>
</div> </div>
</body>
</html> <!--使用z-index比较的时候要看父z-index的大小，子z-index的大小不作为考虑-->