我的Gallery区 怎么跑到aboot区背后去了？要怎么改一下？

/*/**

*header

*/

*{

margin: 0;

margin:0;

}

.header{

position: sticky;

top: 0;

width: 100%;

height: 60px;

background-color: #07CBC9;

z-index: 1;

}

.header img{

width: 260px;

height: 48px;

padding-left: 100px;

padding-top: 6px;

}

.header .logo{

float:left;

}

.header .nav{

float:right;

}

.header .nav ul{

margin-right: 100px;

}

.header .nav ul li {

float: left;

list-style: none;

width: 100px;

height: 60px;

line-height: 60px;

font-size: 16px;

text-align: center;

color: #ffffff;

}

.header .nav ul li:hover{

background-color: #000;

}

.clear{

    clear: both;

}

/**

*banner

*/

.banner{

width: 100%;

height: 800px;

}

.bannerimg img{

/*position: relative;*/

top: 60px;

width: 100%;

height: 800px;

}

.banner  .toplayer{

position: absolute;

top:60px;

left: 0;

background-color: #000;

width: 100%;

height: 800px;

opacity: 0.5;

z-index: 6;

}

.banner .contact form{

height: 800px;

position: absolute;

top:50%;

left: 50%;

margin-left: -300px;

z-index: 9;

}

.banner .contact .input{

width: 600px;

margin: 10px;

font-size: 15px;

background-color: transparent;

border:2px solid gray;

outline:none;

}

.banner .contact  .input:hover {

background-color: #07CBC9;

}

.banner .contact .textarea{

width: 600px;

height: 60px;

margin: 10px;

font-size: 15px;

background-color: transparent;

border:2px solid gray;

outline: none;

}

.banner .contact .textarea:hover {

background-color: #07CBC9;

}

.banner .contact button{

width: 150px;

height: 60px;

margin:10px;

text-align: center;

margin-left: 240px;

font-size: 15px;

background-color: transparent;

border:2px solid gray;

outline: none;

color: gray;

}

.banner .contact button:hover {

background-color: #07CBC9;

}

/**

*about

*/

.about .top {

text-align: center;

width: 100%;

margin:25px;

}

.about .top .toptitle{

margin-top:60px;

    margin-bottom:30px;

    font-size:50px;

    font-weight:bolder;

    color:#333;

}

.about .top hr{

width: 4%;

height: 2px;

margin:0 auto;

background-color: #07cbc9;

}

.about  .top  .text{

font-size: 16px;

margin-top: 20px;

margin-bottom: 30px;

opacity: 0.5;

}

.about .clear{

    clear: both;

}

.about .middle{

width: 100%;

margin:0 auto;

}

.about .middle .middle-left {

position:relative;

width:180px;

float:left;

margin-left:180px;

}

.about .middle .middle-left .top{

font-size: 25px;

font-weight: bolder;

margin-top: 10px;

margin-left: 10px;

}

.about .middle .middle-left .bottom{

position: relative;

width:300px;

    height:165px;

    border:1px solid gray;

    margin-top:10px;

    padding-top:15px;

    padding-left:20px;

    font-size:15px;

    color:#000000;

    z-index: 3;

    top:0;

}

.middle-left .toplayer{

position: absolute;

top:108px;

left: 0;

background-color: #fff;

width: 322px;

height: 180px;

opacity: 0.5;

z-index: 2

}

.about .middle .middle-left .bottom button{

margin-top:15px;

    padding:5px;

    background-color: #000000;

    font-size:15px;

    color:#ffffff;

    border:1px solid #000000;

    z-index: 2;

}

.about .middle .middle-left .bottom button:hover{

background-color: #ffffff;

color:#000;

}

.about .middle .middle-middle{

float: left;

position: absolute;

left:280px;

margin-top:10px;

}

.about .middle .middle-right{

position: absolute;

float:left;

width:180px;

left:70%;

margin-top:10px;

}

.about .middle .middle-middle img{

display:block;

float: left;

width:60%;

z-index: 3;

margin-left: 145px;

}

.about .middle .middle-right .t-text{

float: left;

width: 180px;

height: 140px;

border:1px solid #07cbc9;

margin-left: 30px;

margin-bottom: 25px;

text-align: center;

}

.about .middle .middle-right .t-text .num{

margin-top: 15px;

margin-bottom: 15px;

font-size: 25px;

color: #333;

font-weight: bold;

}

.about .middle .middle-right .t-text hr{

width: 15%;

height: 2px;

margin:0 auto;

background-color: #07cbc9;

}

.about .middle .middle-right .t-text .text{

margin-top: 15px;

font-size: 15px;

color: #333;

}

.about .middle .clear{

clear: both;

}

.about .bottom{

position: relative;

top:100px;

width:100%;

}

.about .bottom .line{

width:100%;

}

.about .bottom .line .pic,.text-box{

float:left;

width:25%;

height: 305px;

}

.about .bottom .line .pic img{

display:block; 

width:100%;

height: 305px;

}

.about .bottom .line .text-box{

width: 25%;

height: 305px;

color:#fff;

background-color: #07cbc9;

}

.about .bottom .line .text-box .text-main .text-1{

font-size: 20px;

margin:16px 0 16px 30px;

}

.about .bottom .line .text-box .text-main .text-2{

font-size: 14px;

margin:0 0 16px 30px;

}

.about .bottom .line .text-box .text-main .text-3{

font-size: 12px;

margin:16px 0 35px 30px;

font-weight: lighter;

}

.about .bottom .line .text-box .text-main button{

/*margin: 0 auto;*/

margin-left: 30%;

    text-align: center;

    width:100px;

    height:40px;

    font-size: 15px;

    color:#ffffff;

    background-color: #000000;

    border:1px solid #000000;

}

.about .bottom .line .text-box .text-main button:hover{

background-color: #ffffff;

color:#000;

}

.about .clear{

clear: both;

}

.about .static{

position: static;

}

.gallery {

position: relative;

width: 100%;

margin:0 auto;

top:800px;

}

.gallery .top{

margin-top: 500px;

margin-bottom: 30px;

font-size: 50px;

font-weight: bolder;

text-align: center;

color: red;

}

.gallery hr{

width:5%;

    height:2px;

    margin:0 auto;

    background-color: #07cbc9;

}

.gallery .middle{

margin-top: 20px;

text-align: center;

font-size: 20px;

color:#000;

}

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>index</title>

<link rel="stylesheet" href="css/index.css">

</head>

<body>

<!--头部 -->

<div class="header">

<div class="logo">

<img src="images/logo.png" alt="logo">

</div>

<div class="nav">

<ul>

<li>HOME</li>

<li>ABOUT</li>

<li>GALLEY</li>

<li>RACULTY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ul>

</div>

</div>

<div class="clear"></div>

<!--banner -->

<div class="banner">

<div class="bannerimg">

<img src="images/banner3.jpg" alt="banner">

</div>

<!-- 遮罩层 -->

<div class="toplayer"></div>

<div class="contact">

<form action="" method="post">

    <input type="text" placeholder="your Name" class="input"><br>

    <input type="text" placeholder="your Phone" class="input"><br>

    <input type="text" placeholder="your Email" class="input"><br>

    <textarea  placeholder="Write Your Comment Here" class="textarea"></textarea><br>

    <button>SEND MESSAGE</button>

    </form>

</div>

</div>

<div class="clear"></div>

<!--about -->

<div class="about">

<div class="top">

<div class="toptitle">ABOUT</div>

<hr>

<div class="text">Lorem Ispsum is simply dummy text of the printing and typesetting<br>

indeusty.Lorem Ipsum has been the industy of standand dummy<br>

text over since 1500s 

</div>

</div>

<div class="clear"></div>

<div class="middle">

<div class="middle-left">

<div class="top">

&nbsp;A WORD<br>

ABOUT US

</div>

<div class="bottom">

Praseent dignissim viverra est,sed<br>

ligula congue non.Sed ac nisl<br>

et feils gravida commodo? Suspendisse<br>

eget ullamcorper ipsum.Suspendisse<br>

diam amet.<br>

<button >EXPLORE</button>

</div>

<div class="toplayer"></div>

</div>

<div class="middle-middle">

<img src="images/bb3.jpg">

</div>

<div class="middle-right">

<div class="t-text">

<div class="num">70000</div>

<hr>

<div class="text"> Students</div>

</div>

<div class="t-text">

<div class="num">600</div>

<hr>

<div class="text"> Faculty</div>

</div>

</div>

</div>

<div class="clear"></div>

<div class="bottom">

<div class="line">

<div class="pic">

<img src="images/b1.jpg">

</div>

<div class="text-box">

<div class="text-main">

<div class="text-1">

Library

</div>

<div class="text-2">

LOREM Ipsum dummy text of the<br>

printing and typesetting industry

</div>

<div class="text-3">

Lorem Ipsum has been the industrys standand dummy<br>

text ever since the 1500s when an unknown printer took<br>

a gallery of type and scrambled it to make a type<br>

book.

</div>

<button>EXPLORE</button>

</div>

</div>

<div class="pic">

<img src="images/b2.jpg">

</div>

<div class="text-box">

<div class="text-main">

<div class="text-1">

Library

</div>

<div class="text-2">

LOREM Ipsum dummy text of the<br>

printing and typesetting industry

</div>

<div class="text-3">

Lorem Ipsum has been the industrys standand dummy<br>

text ever since the 1500s when an unknown printer took<br>

a gallery of type and scrambled it to make a type<br>

book.

</div>

<button>EXPLORE</button>

</div>

</div>

</div>

<div class="line">

<div class="text-box">

<div class="text-main">

<div class="text-1">

Library

</div>

<div class="text-2">

LOREM Ipsum dummy text of the<br>

printing and typesetting industry

</div>

<div class="text-3">

Lorem Ipsum has been the industrys standand dummy<br>

text ever since the 1500s when an unknown printer took<br>

a gallery of type and scrambled it to make a type<br>

book.

</div>

<button>EXPLORE</button>

</div>

</div>

<div class="pic">

<img src="images/b3.jpg">

</div>

<div class="text-box">

<div class="text-main">

<div class="text-1">

Library

</div>

<div class="text-2">

LOREM Ipsum dummy text of the<br>

printing and typesetting industry

</div>

<div class="text-3">

Lorem Ipsum has been the industrys standand dummy<br>

text ever since the 1500s when an unknown printer took<br>

a gallery of type and scrambled it to make a type<br>

book.

</div>

<button>EXPLORE</button>

</div>

</div>

<div class="pic">

<img src="images/b4.jpg">

</div>

</div>

</div>

</div>

<div class="clear"></div>

<div class="static"></div>

<!--galley -->

<div class="galley">

<div class="top">GALLERY</div>

<hr>

<div class="middle">

Lorem Ipsum has been the industrys standand dummy<br>

text ever since the 1500s when an unknown printer took<br>

apaceimen book.

</div>

<div class="bottom">

<div class="picture">

<img src="images/03-01.jpg">

<div class="text">

SCIENCE LAB

</div>

</div>

<div class="picture">

<img src="images/03-02.jpg">

<div class="text">

SCIENCE LAB

</div>

</div>

<div class="picture">

<img src="images/03-03.jpg">

<div class="text">

SCIENCE LAB

</div>

</div>

<div class="clear"></div>

<div class="picture">

<img src="images/03-04.jpg">

<div class="text">

SCIENCE LAB

</div>

</div>

<div class="picture">

<img src="images/03-05.jpg">

<div class="text">

SCIENCE LAB

</div>

</div>

<div class="picture">

<img src="images/03-06.jpg">

<div class="text">

SCIENCE LAB

</div>

</div>

<div class="clear"></div>

</div>

</div>

<!--bottom -->

<div class="bottom">© 2016 imooc.com 京ICP备13046642号</div>

</body>

</html>