相对与遮罩层，进行了绝对定位，文字怎么没有在指定的范围内，文字跑到了网页的右上角？

/**页面基础样式*/

*{padding: 0;margin:0;font-family: "微软雅黑";}

body,a,ul{text-decoration: none;list-style: none;text-align: center;}

/**页面头部*/

.header{background:#07cbc9;width:100%;min-width:700px;position: fixed;top:0;

z-index: 999;/*提高层级，防止被覆*/

}

/**页面头部logo标志*/

.header .logo{float: left;margin-left: 50px;}

.header .logo img{width:200px;height: 50px;}

/**页面头部导航项*/

.header .nav{float:right;}

.header .nav ul{margin:0 auto;margin-right: 100px;}

.header .nav ul li{list-style: none;float: left;color:#ffffff;

padding-right: 10px;font-weight: bolder;height: 50px;line-height:50px;}

.header .nav ul li:hover{background:red;}

/**banner图*/

.banner img{width: 100%;height: 500px;margin-top: 50px;}

/**banner图遮盖层*/

.banner .banner-layer{background: #000;opacity:0.4;position: absolute;top: 50px;left: 0;width: 100%;height: 500px;z-index: 1;}

/**banner图上层表单*/

.banner form{width: 400px;height: 300px;position: absolute;border:1px solid black;background:#fff;

left:50%;margin-left: -200px;top:300px;margin-top:-150px;}

.banner form input{height: 30px;width: 80%;text-indent: 30px;}

/**ABOUT区*/

.ABOUT{width: 100%;height: 700px;}

/*about区顶部标题段落*/

.ABOUT .about-top{width:568px;margin:0 auto;border:0px solid black;}

.ABOUT .about-top .title-one{font-size: 30px;font-weight: bolder;padding-top: 30px;padding-bottom: 10px;}

.ABOUT .about-top hr{background-color: #07cbc9;height: 1px;width:40px;margin:0 auto;border:none;margin-bottom: 10px;}

.ABOUT .about-top pre{color: #aaa;}

/*about中间图文混排*/

.ABOUT .about-middle{width:1100px;margin:0 auto;border:0px solid black;overflow: hidden;}

.ABOUT .about-middle .about-middle-left{float: left;border:1px solid black;width:264px;height:380px;}

.ABOUT .about-middle .about-middle-left .left-word{font-size: 30px;

font-weight: bold;}

.ABOUT .about-middle .about-middle-left .left-layer{width: 370px;height: 246px;background:#fff;opacity: 0.5;

border:1px solid #35c;position: relative;}

.ABOUT .about-middle .about-middle-left .left-layer-top{width: 370px;height: 246px;position: absolute;

z-index: 999;}

.ABOUT .about-middle .about-middle-left .left-layer-top p{margin:20px 10px;}

.ABOUT .about-middle .about-middle-left .left-layer-top .explore{background:black;width: 102px;height: 45px;

margin-left: 30px;color: white;line-height: 45px;}

.ABOUT .about-middle .about-middle-mid{width: 568px;height: 380px;float: left;}

.ABOUT .about-middle .about-middle-mid img{width: 568px;height: 380px;}

.ABOUT .about-middle .about-middle-right{float: right;border:0px solid red;width:266px;height:380px;}

.ABOUT .about-middle .about-middle-right div{border:1px solid #07cbc9;

width:238px;height:144px;margin-bottom: 30px;margin-left:26px;}

.ABOUT .about-middle .about-middle-right .shuzi{font-size: 30px;font-weight: bolder;margin:15px 0;}

.ABOUT .about-middle .about-middle-right hr{height: 2px;border: none;width: 40px;background:#07cbc9;margin:0 auto;margin-bottom: 15px;}

.ABOUT .ABOUT-top .ABOUT-content .title-two{position: absolute;top:100px;left: 0px;font-size: 20px;

font-weight: bold;}

.ABOUT .ABOUT-top .ABOUT-content .left-layer{opacity: 0.4;background-color: #fff;position: absolute;top:200px;

width: 370px;height: 246px;}

.ABOUT .ABOUT-top .ABOUT-content .left{border:1px solid #ccc;width: 370px;height: 246px;

position: absolute;top:200px;

 }

.ABOUT .ABOUT-top .ABOUT-content .left .explore{background:#000;color: white;width: 102px;

height: 45px;position: relative;margin-top: 20px;margin-left: 20px;line-height: 45px;}

.ABOUT .ABOUT-top .ABOUT-content .right-top{border:1px solid #07cbc9;width: 238px;height: 144px;position:absolute;top:125px;right: 0;}

.ABOUT .ABOUT-top .ABOUT-content .right-bot{width: 238px;height: 144px;border:1px solid #07cbc9;position:absolute;top:310px;right: 0;}

.ABOUT .ABOUT-bot{width: 100%;min-height: 500px;border:1px solid black;background-color: #07cbc9;}

.ABOUT .ABOUT-bot dl{width: 23%;height: 700px;border:1px solid blue;}

.ABOUT .ABOUT-bot dl dt img{width:100%;border:1px solid red;height:50%;}

.ABOUT .ABOUT-bot dl dd{text-align: center;border:1px solid red;}

<!DOCTYPE html>

<html>

<head>

<title>css基础</title>

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

</head>

<body>

<!--顶部-->

<div class="header">

<!--顶部左边logo标志-->

<div class="logo"><a href="#"><img src="images/logo.png"></a></div>

<!--顶部右边nav导航栏-->

<div class="nav">

<ul>

<li><a href="#">HOME</a></li>

<li><a href="#">ABOUT</a></li>

<li><a href="#">GALLERY</a></li>

<li><a href="#">FACULTY</a></li>

<li><a href="#">EVENTS</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</div>

</div>

<!--banner图-->

<div class="banner">

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

<div class="banner-layer"></div>

<form>

<table>

<tr>

<td><input type="text" name="name" placeholder="your Name" size="80px"></td>

</tr>

<tr>

<td><input type="text" name="phone" placeholder="your Phone"></td>

</tr>

<tr>

<td><input type="text" name="email" placeholder="your Email"></td>

</tr>

<tr>

<td><textarea name="Comment" placeholder="Where Your Comment Here" rows="3" cols="40"></textarea></td>

</tr>

<tr>

<td align="center"><button>SEND MESSAGE</button></td>

</tr>

</table>

</form>

</div>

<!--ABOUT区-->

<div class="ABOUT">

<!--about区顶部标题段落-->

<div class="about-top">

<div class="title-one">ABOUT</div>

<hr>

<pre>Lorem Ipsum is simply dummy text of the printing and typesetting

industry.Lorem Ipsum has been the industry's standard dummy

text ever since the 1500s.

</pre>

</div>

<!--about中间图文混排-->

<div class="about-middle">

<!--左侧-->

<div class="about-middle-left">

<div class="left-word">A WORD<br>ABOUT US</div>

<div class="left-layer"></div>

<div class="left-layer-top">

<p>Praesent dignissim viverra est,sed<br>

bibendum ligula congue non.Sed ac nisl<br>

et felis gravida commodo?Suspendisse<br>

eget ullamcorper ipsum.Suspendisse<br>

diam amet.</p>

<div class="explore">EXPLORE</div>

</div>

</div>

<!--中心图片-->

<div class="about-middle-mid">

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

</div>

<!--右侧-->

<div class="about-middle-right">

<div>

<p class="shuzi">70000</p>

<hr>

<p class="word">Students</p>

</div>

<div>

<p class="shuzi">600</p>

<hr>

<p class="word">Faculty</p>

</div>

</div>

</div>

</div>

<!-- <div class="ABOUT">

<div class="about-middle">

<div class="title-two">A WORD<br>ABOUT US</div>

<div class="left-layer"></div>

<div class="left">

<div class="p">

Praesent dignissim viverra est,sed<br>

bibendum ligula congue non.Sed ac nisl<br>

et felis gravida commodo?Suspendisse<br>

eget ullamcorper ipsum.Suspendisse<br>

diam amet.

</div>

<div class="explore">EXPLORE</div>

</div>

<div class="right-top">

<div>70000</div>

<hr>

<div>Students</div>

</div>

<div class="right-bot">

<div>600</div>

<hr>

<div>Faculty</div>

</div>

</div>

</div>

<div class="ABOUT-bot">

<dl>

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

<dd><em>Conference Hall</em>>

<span>LOREM ipsum is simply dummy text of the

peinting and typesetting industry</span>

Lorem Ipsum has been the industry's standard dummy

text ever since the 1500s,when an unknown printer took

a galley of type and scrambled it to make a type

specimen book. LOREM ipsum is simply dummy text of the

peinting and typesetting industry</span>

Lorem Ipsum has been the industry's standard dummy

text ever since the 1500s,when an unknown printer took

a galley of type and scrambled it to make a type

specimen book.                          

<button>EXPLORE</button>

</dd>

</dl>

<dl>

<dd><em>Conference Hall</em>>

<span>LOREM ipsum is simply dummy text of the

peinting and typesetting industry</span>

Lorem Ipsum has been the industry's standard dummy

text ever since the 1500s,when an unknown printer took

a galley of type and scrambled it to make a type

specimen book.

<button>EXPLORE</button>

</dd>

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

</dl>

<dl>

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

<dd><em>Conference Hall</em>>

<span>LOREM ipsum is simply dummy text of the

peinting and typesetting industry</span>

Lorem Ipsum has been the industry's standard dummy

text ever since the 1500s,when an unknown printer took

a galley of type and scrambled it to make a type

specimen book.

<button>EXPLORE</button>

</dd>

</dl>

<dl>

<dd><em>Conference Hall</em>>

<span>LOREM ipsum is simply dummy text of the

peinting and typesetting industry</span>

Lorem Ipsum has been the industry's standard dummy

text ever since the 1500s,when an unknown printer took

a galley of type and scrambled it to make a type

specimen book.

<button>EXPLORE</button>

</dd>

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

</dl>

</div>

</div> -->

<!--GALLERY区-->

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

<!--页脚区-->

<div class="footer"></div>

</body>

</html>