遮罩层把底下的内容给遮挡了,咋整?

<!DOCTYPE html>
<html>
<head>
 <title>career bulider</title>
 <meta charset="utf-8">
 <!-- <link rel="stylesheet" type="text/css" href="stylelist.css"> -->
 <style type="text/css">
  *{
 padding:0;margin:0;
}
.top{
 width:100%;height:100px;
 background: #07cbc9;
}
.top img{
 height:80px;width:auto;
 text-align: left;
 margin-top:10px;
 float:left;
}
.top-nav ul{
 float: right;
 list-style-type: none;
 padding-right: 20px;
}
.top-nav ul li{
 height:100px;
 float:left;
    padding-right: 20px;
    line-height: 100px;
    font: 30px bold "微软雅黑";    
}
.top-nav ul li a{
 text-decoration:none;
 color:#fff;
}
.top-nav ul li a:hover{
 background-color: #000;
}
.banner{width:100%;height:600px;
}
.banner img{
 width: 100%;height:600px;
}
.banner-top{
 width:100%;height:600px;
 background: #000;
 position: absolute;
 top:100px;left:0;
 opacity:0.5;
}
.form{
 width:400px;height:200px;
 position:absolute;
 top:50%;left:50%;
 margin-left: -200px;margin-top: -200px;
 text-align: center;
}     
input{
 width:400px;height:30px;
 margin-top: 20px;
 background: none;
 border-color: gray;
}
textarea{
 width:400px;height:80px;
 margin-top:20px;
 background: none;
 border-color: gray;
}
button{
 width:200px;height:50px;
 background: none;
 margin-top: 20px;
 color:#ffffff;
 border-color: gray;
}
input:hover{
 background:#07cbc9;
}
textarea:hover{
 background:#07cbc9;
}
button:hover{
 background: blue;
}
.ab-top{
 font: "微软雅黑";
}
.ab-top p.p1{
 font:60px bold;
 text-align: center;
 line-height: 200px;
}
.ab-top p span{
 padding-bottom:10px;
 border-bottom:5px solid #07cbc9;
}
.top-text{
 width:600px;
    text-align:center;
    color:gray;
    position: relative;
    left:50%;top:0;
    margin-left: -300px;
}
.ab-top .top-box{
 width:600px;height:500px;
 margin:20px auto;
}
.ab-top .pic1 {
 width:600px;
 float: left;
}
.pic1 img{
 width:600px;
 
}
.top-box1{
 width:300px;height:260px;
    position: absolute;
    left:20%;
}
.top-box1 .p2{
 font:30px bold;
}
.boxlayer{
 width:300px;height:180px;
 position: absolute;
 left:0;bottom:0;
 background: #fff;
 opacity: 0.5;
}
.top-box2{
 width:100%;height:200px;
 padding:0 25px;
 z-index:#999;
}
 .top-box1 button{
 width:80px;height:40px;
 color: #fff;
 background: #000;
}
 </style>
</head>
<body>
<!-- 顶部 -->
<div class="top">
 <img src="images/logo.png">
 <div class="top-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="#">enents</a></li>
 <li><a href="#">contact</a></li>
 </ul>
 </div>
</div>
<!-- banner -->
<div class="banner">
 <img src="images/banner3.jpg">
 <div class="banner-top"></div>
 <div class="form">
  <table>
  <form> 
   <input type="text" name="yourname" placeholder="your name">
   <br>
   <input type="text" name="yourphone" placeholder="your phone">
   <br>
   <input type="text" name="yourEmail" placeholder="your Email">
   <br>
   <textarea name="wirte" placeholder="wirte your comment Here" rows="6" clos="50"></textarea>
   <br>
  <button>SEND MESSAGE</button>
  </form>
  </table>
 </div>
</div>
<!-- about -->
<div class="ab-top">
 <p class="p1">AB<span>O</span>UT</p>
 <div class="top-text">
  Lorem Ipsum is simple dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
 </div>
 <div class="top-box">
 <div class="pic1">
 <img src="images/bb3.jpg">
 </div>
 <div class="top-box1">
 <p class="p2">A WORD <br>ABOUT US</p>
 <div class="boxlayer"></div>
 <div class="top-box2">
  <p class="p3">
   Praent dignissim viverra est.sed bibendum ligula congue non.sed ad nissuef feils grabvida commodo Suspendisseget ullamcorrper ispsum.Suspendlisse diam ament.
  </p>
  <button>EXPLORE</button>
 </div>
 </div>
 </div>
</div>
<!-- gallery -->
<!-- 页脚 -->
</body>
</html>

土土的星 2018-12-07

源自：项目：网页布局案例 2-10 作业题