这个顶上被遮住了为什么挪不下来

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    
    <script type="text/javascript" src="js\flexible.js">
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
    <title>Document</title>
</head>
<style type="text/css">
    *{
        box-sizing: border-box;
        margin: 0;
        padding:0;
    }
    .head{
        height: 2.125rem;
        background-color: yellow;
        display: flex;
        position: fixed;
     
    }
    .ig{
        display: flex;
         
 
    }
    button{
        border-radius:40px;
        height: 1.225rem;
        width: 3rem;
        border:none;
 
    }
    .btn{
        display: flex;
         
    }
     
    .ig img{
        height: 100%;
        width: 40%;
    }
    .middle{
        padding-top: 2.125rem;
    }
     
    .slider img{
        width: 100%;
    }
    li{
        list-style: none;
    }
    .slider{
        display: flex;
        width: 100%;
        height: 6.25rem;;
    }
    .navg{
        display: flex;
        width: 20%;
        flex-wrap: wrap;
    }
</style>
 
<body>
    <div class="head">
        <div class="ig">
            <img src="图片\logo.jpg" >
        </div>
 
        <div class="btn">
            <button>下载APP</button>
        </div>
    </div>  
 
    <div class="middle">
        <div class="slider">
            <img src="图片\1.jpg">
        </div>
        <div class="nav">
        <ul class="navg">
            <li class="nav1">
                <a href="###">
                    <img src="图片\2.jpg">
                </a>
            </li>
            <li class="nav1">
                <a href="###">
                    <img src="图片\3.jpg">
                </a>
            </li>
            <li class="nav1">
                <a href="###">
                    <img src="图片\4.jpg">
                </a>
            </li>
            <li class="nav1">
                <a href="###">
                    <img src="图片\5.jpg">
                </a>
            </li>
            <li class="nav1">
                <a href="###">
                    <img src="图片\6.jpg">
                </a>
            </li>
        </ul>
    </div>
    </div>
 
    <div class="foot"></div>
 
     
</body>
</html>