导航栏 ------ z-index

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的大小不作为考虑-->