麻烦老师帮我看看为什么gallery那部分会把上面挡住

*{
  margin: 0;
  padding: 0;
}
/*header
logo
导航
*/
.header{
  width: 100%;
  height: 100px;
  background-color: #07cbc9;
  font-family: "Microsoft YaHei UI";
  overflow: hidden;
  position: sticky;
  top: 0px;
  z-index: 3;

}
.logo{
  height: 100px;
  width: 260px;
  color: #ffffff;
  float: left;
  line-height: 100px;
  position: absolute;
  left: 10%;
  top: 20px;
}
.daohang{
  float: right;
  height: 100px;
  width: auto;
  position: absolute;
  right: 150px;
  line-height: 100px;
  top: -10px;
  color: #ffffff;

}
.daohang ul li{
  font-size: 10px;
  text-align: center;
  list-style: none;
  height: 100px;
  width: 60px;
  float: left;
  line-height: 100px;
  margin-right: 20px;
}

.daohang ul li:hover{
  background-color:#000000 ;
}
/*banner
图片背景
遮罩层
表单
*/
.banner{
  width: 100%;
  height: auto;
  position: relative;
  background-color: black;
}
.banner img{
  width: 100%;
}
.banner .cover{
  width: 100%;
  height: 680px;
  background: #555555;
  position: absolute;
  top: 0;
  opacity: 0.5;
}

.banner .form{
  position: absolute;
  top: 50%;
  left:50%;
  margin-left: -225px;
  margin-top: -170px;
  z-index: 1;

}
.input{
  border: #cccccc solid 1px;
  height: 25px;
  width: 450px;
  opacity: 1;
  margin-bottom: 10px;
  background-color: transparent;
  color: #ffffff;

}
#comment{
  border: #ffffff solid 1px;
  width: 450px;
  height: 100px;
  background-color: transparent;
  color: #ffffff;
}
.submit{
  border: #ffffff solid 3px;
  height: 50px;
  width: 100px;
  opacity: 0.5;
  margin-left: 175px;
  background-color: transparent;
  color: #ffffff;
}
.banner .input:hover{
  border: #07cbc9 solid 1px;
}
#comment:hover{
  border: #07cbc9 solid 1px;
}
.submit:hover{
  border: none;
  background-color: #07cbc9;
}

/*about

*/
.about{
  width: 100%;
  height: 600px;
  background-color: #ffffff;
  text-align: center;
  position: relative;
  font-family: "Microsoft YaHei UI";
  overflow: hidden;
}
.about .about_header{
  font-size: 50px;
  margin-top: 20px;
  font-weight: bolder;
}
.about .about_content{
  font-size: 10px;
  color: #cccccc;
  margin-bottom: 20px;
}
/*短线*/
.line{
  background-color:#07cbc9;
  display:block;
  width: 40px;
  height: 2px;
  margin:15px auto;
}
.about .mid{
  width: 100%;
  height: 300px;
  margin-bottom: 100px;
}
.about .mid .left_text{
  font-size: 30px;
  position: absolute;
  left: 25%;
  margin-left: -20px;
  z-index: 2;
}
.about .mid .left_explore{
  width: 300px;
  height: 180px;
  padding: 15px 10px;
  border: #cccccc solid;
  background-color: #ffffff;
  opacity: 0.4;
  font-size: 15px;
  position: absolute;
  text-align: left;
  left: 23%;
  top: 43%;
  margin-left:-30px;
  z-index:1
}
#no1{
  width: 80px;
  height: 35px;
  font-size: 10px;
  background-color: #000000;
  color: #ffffff;
  padding-top: 15px;
  position: absolute;
  left: 24%;
  top: 64%;
  margin-left: -30px;
  z-index: 2;
}
#no1:hover{
  border: #000000 solid 1px;
  background-color: transparent;
  color: #000000;
}
.about .mid .img{
  background-image: url("../images/bb3.jpg");
  background-size: 100%;
  width: 30%;
  height: 286px;
  position: absolute;
  left: 50%;
  margin-left:-220px;

}

.about .mid .box{
  border: #07cbc9 solid 1px;
  width: 170px;
  height: 90px;
  position: absolute;
  right: 50%;
  margin-right: -400px;
  padding-top: 15px;
}

.about .mid .box .number{
  font-size: 23px;
  font-weight: bolder;
}
.about .mid .box .right_text{
  font-size: 15px;
}
#box2{
  top: 300px;
}

/*about-bottom*/
.about .bottom{
  width: 100%;
  height: 792px;
  position: relative;
}
.about .bottom .photo{
  position:absolute;
  width: 25%;
  height: 50%;
}
.about .bottom .text_box{
  position: absolute;
  width: 25%;
  height: 50%;
  background-color: #07cbc9;
}
#photo1{
  background-image: url("../images/b1.jpg");
  left: 0;
}
#photo2{
  background-image: url("../images/b2.jpg");
  right: 25%;
}
#photo3{
  background-image: url("../images/b3.jpg");
  left: 25%;
  bottom: 0;
}
#photo4{
  background-image: url("../images/b4.jpg");
  right: 0;
  bottom: 0;
}
#tb1{
  left: 25%;
}
#tb2{
  top: 0;
  right: 0;
}
#tb3{
  bottom: 0;
}
#tb4{
  bottom: 0;
  right: 25%;
}
.about .bottom .text_box .tbt{
  color: white;
  font-size: 25px;
  float: left;
  margin-top: 20px;
  margin-left: 40px;
  overflow: hidden;
}
.about .bottom .text_box .tbt1{
  color: #ffffff;
  text-align: left;
  float: left;
  font-size: 13px;
  margin-top: 20px;
  margin-left: 40px;
  overflow: hidden;
}
.about .bottom .text_box .tbt2{
  color: #cccccc;
  text-align: left;
  float: left;
  font-size: 13px;
  margin-top: 20px;
  margin-left: 40px;
  overflow: hidden;
}
#no2,#no3,#no4,#no5{

  width: 80px;
  height: 35px;
  font-size: 10px;
  background-color: #000000;
  color: #ffffff;
  float: left;
  text-align: center;
  padding-top: 10px;
  margin-top: 40px;
  margin-left: 37.5%;
  overflow: hidden;
}
#no2:hover {
  border: #000000 solid 1px;
  background-color: transparent;
  color: #000000;
}
#no3:hover {
  border: #000000 solid 1px;
  background-color: transparent;
  color: #000000;
}
#no4:hover {
  border: #000000 solid 1px;
  background-color: transparent;
  color: #000000;
}
#no5:hover {
  border: #000000 solid 1px;
  background-color: transparent;
  color: #000000;
}

/*gallery*/
.gallery{
  width: 100%;
  height: 600px;
  background-color: #ffffff;
  text-align: center;
  /*position: relative;*/
  font-family: "Microsoft YaHei UI";
  
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-9作业</title>
    <link rel="stylesheet" href="2-9作业.css">
</head>
<body>
 <!--header-->
 <div class="header">
    <div class="logo">
      <img src="../images/logo.png">
    </div>
    <div class="daohang">
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>GALLERY</li>
        <li>FACULTY</li>
        <li>EVENTS</li>
        <li>CONTACT</li>

      </ul>
    </div>
  </div>
<!--banner-->
 <div class="banner">
    <div class="background">
      <img src="../images/banner3.jpg">
      <div class="cover"></div>
    </div>
    <div class="form">
      <form>
        <input class="input" type="text" name="your Name" value="your Name">
        <br>
        <input class="input" type="text" name="your Phone" value="your Phone">
        <br>
        <input class="input" type="text" name="your Email" value="your Email">
        <br>
        <textarea placeholder="Write your Comment" id="comment" cols="72.7" rows="10"></textarea>
        <br>
        <br>
        <input type="submit" class="submit" value="SEND MESSAGE">
      </form>
    </div>
  </div>
 <!--about-->
 <div class="about">
 <!--about,top-->
 <div class="top">
     <div class="about_header">ABOUT</div>
     <label class="line"></label>
     <div class="about_content">Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s</div>
   </div>
 <!--about,mid-->
 <div class="mid">
     <div class="left_text">A WORD<br>ABOUT US</div>
     <div class="left_explore">
 Praesent dignissm viverra est, sed<br>bibendum ligula congue non. Sed ac nisl<br>et felis gravada commodo
       ? Suspendise<br>eget ullamopt ipsum. Suspendisse<br>diam amet.
     </div>
     <div class="explore" id="no1">EXPLORE</div>
     <div class="img"></div>
     <div class="box" id="box1">
       <div class="number">7000</div>
       <label class="line"></label>
       <div class="right_text" id="rt1">Students</div>
     </div>
     <div class="box" id="box2">
       <div class="number">600</div>
       <label class="line"></label>
       <div class="right_text" id="rt2">Faculty</div>
     </div>
   </div>
 <!--about,bottom-->
 <div class="bottom">
     <div class="photo" id="photo1"></div>
     <div class="photo" id="photo2"></div>
     <div class="photo" id="photo3"></div>
     <div class="photo" id="photo4"></div>

     <div class="text_box" id="tb1">
       <div class="tbt ">Library</div>
       <div class="tbt1">Lorem Ispum is simply dummy text of the<br> printing and typesetting industry</div>
       <div class="tbt2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the
        1500s, when an unknown printer took<br>a gallary of type and scramble it to make a type<br>specimen
       book</div>
       <div class="explore" id="no2">EXPLORE</div>
     </div>
     <div class="text_box" id="tb2">
       <div class="tbt ">Computer Lab</div>
       <div class="tbt1">Lorem Ispum is simply dummy text of the<br> printing and typesetting industry</div>
       <div class="tbt2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the
         1500s, when an unknown printer took<br>a gallary of type and scramble it to make a type<br>specimen
         book</div>
       <div class="explore" id="no3">EXPLORE</div>
     </div>
     <div class="text_box" id="tb3">
       <div class="tbt ">Conference Hall</div>
       <div class="tbt1">Lorem Ispum is simply dummy text of the<br> printing and typesetting industry</div>
       <div class="tbt2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the
         1500s, when an unknown printer took<br>a gallary of type and scramble it to make a type<br>specimen
         book</div>
       <div class="explore" id="no4">EXPLORE</div>
     </div>
     <div class="text_box" id="tb4">
       <div class="tbt ">Play Ground</div>
       <div class="tbt1">Lorem Ispum is simply dummy text of the<br> printing and typesetting industry</div>
       <div class="tbt2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the
         1500s, when an unknown printer took<br>a gallary of type and scramble it to make a type<br>specimen
         book</div>
       <div class="explore" id="no5">EXPLORE</div>
     </div>
   </div>
 </div>
 <!--gallery-->
 <div class="gallery">
    <div class="g_top">
      <div class="about_header">GALLERY</div>
    </div>
    <div class="g_bottom"></div>
  </div>
<!--footer-->
</body>
</html>