CSS-2-10项目作业。滑到gallery部分导航条定位失败

这是html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS作业</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
  <div class="logoNav">
   <div class="logo">
    <a href="#"><img src="img/images/logo.png"></a>
   </div>
   <ul class="nav">
    <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>
<div class="banner">
   <div class="top">
    <img src="img/images/banner3.jpg">
   </div>
   <div class="topLayer"></div>
   <div class="topLayer-top">
    <form class="form1">
     <input type="text" name="username" placeholder="  your Name" >
     <input type="text" name="phone" placeholder="  your Phone" >
     <input type="text" name="email" placeholder="  your Email" >
    </form>
    <textarea name="comment" placeholder="  Write Your Comment Here" ></textarea>
    <form class="form2">
     <input type="submit" name="message" value="SEND MESSAGE" placeholder="SEND MESSAGE">
    </form>

   </div>
  </div>
<div class="body">
  <div class="about">
   <div class="about1">
    <p>ABOUT</p>
    <p class="about11">—</p>
    <div class="about12">Lorem Ipsum is simply dummy text of the pringting and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
    <div class="about13">
     <div class="sub13_1">
      A WORD<br/>ABOUT US
     </div>
     <div class="sub13_2">
      <img src="img/images/bb3.jpg">
     </div>
     <div class="sub13_3">
      <div class="sub13_3_1">
       <p><b>70000</b></p>
       <p class="blue">—</p>
       <p class="smaller">Students</p>
      </div>
      <div class="sub13_3_1">
       <p><b>600</b></p>
       <p class="blue">—</p>
       <p class="smaller">Faculty</p>
      </div>
     </div>
    </div>
    <div class="about14">
     <div class="aboutLayer"></div>
                 <div class="aboutTopLayer">
                 Praesent dignissim viverra est,sed bibendum liguda commodo?Suspendisse eget ullamcorper ipsum.Sumspendisse diam amet.<br/>
      <input type="button" name="exlore" value="EXPLORE">
                 </div>

    </div>
   </div>
   <table class="about2">
     <tr>
      <td class="relTri">
       <img src="img/images/b1.jpg">
       <div class="tri1 special"></div>
      </td>
      <td class="tContent">
       <p>Library</p>
       <span class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry</span><br/>
       <span class="gray">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span>
       <input type="button" name="exlore" value="EXPLORE">
      </td>
      <td class="relTri"><img src="img/images/b2.jpg"><div class="tri2 special"></div></td>
      <td class="tContent">
       <p>Computer Lab</p>
       <span class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry</span><br/>
       <span class="gray">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span>
       <input type="button" name="exlore" value="EXPLORE">
      </td>
     </tr>
     <tr>
      <td class="tContent">
       <p>Conference Hall</p>
       <span class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry</span><br/>
       <span class="gray">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span>
       <input type="button" name="exlore" value="EXPLORE">
      </td>
      <td class="relTri"><img src="img/images/b3.jpg"><div class="tri3"></div></td>
      <td class="tContent">
       <p>Play Ground</p>
       <span class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry</span><br/>
       <span class="gray">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</span>
       <input type="button" name="exlore" value="EXPLORE">
      </td>
      <td class="relTri"><img src="img/images/b4.jpg"><div class="tri4"></div></td>
     </tr>
   </table>
  </div>
  <div class="GALLERY">
   <div class="about1">
    <p>GALLERY</p>
    <p class="about11">—</p>
    <div class="about12">Lorem Ipsum is simply dummy text of the pringting and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
   </div>
   <div class="subGallery">
    <table>
     <tr>
      <td>
       <dl>
        <dt><img src="img/images/03-01.jpg"></dt>
        <dd>SCIENCE LAB</dd>
       </dl>
      </td>
      <td>
       <dl>
        <dt><img src="img/images/03-02.jpg"></dt>
        <dd>INDOOR STADIUM</dd>
       </dl>
      </td>
      <td class="noRight">
       <dl>
        <dt><img src="img/images/03-03.jpg"></dt>
        <dd>TRANSPORTATION</dd>
       </dl>
      </td>
     </tr>
     <tr>
      <td>
       <dl>
        <dt><img src="img/images/03-04.jpg"></dt>
        <dd>KIDS ROOM</dd>
       </dl>
      </td>
      <td>
       <dl>
        <dt><img src="img/images/03-05.jpg"></dt>
        <dd>MEDITATION CLASSES</dd>
       </dl>
      </td>
      <td class="noRight">
       <dl>
        <dt><img src="img/images/03-06.jpg"></dt>
        <dd>KIDS PLAY GROUND</dd>
       </dl>
      </td>
     </tr>
    </table>
   </div>
  </div>
</div>
<div class="footer">
  © 2016 imooc.com 京ICP备13046642号
</div>
</body>
</html>

这是css代码：

*{
padding:0;
margin:0;
font-family:"微软雅黑","Times New Roman",sans-serif;
}
a{
text-decoration: none;
}
span.blue{
color:#07cbc9;
}
li{
list-style: none;
}
.header{
width:100%;
position: sticky;
top:0;
z-index: 99990;
}
.header .logoNav{
background-color: #07cbc9;
height:100px;

overflow:hidden;
zoom:1;

}
.header .logo{
float:left;
height: 48px;
margin-left:60px;
margin-top:26px;
}
.header .nav{
float:right;
margin-right:60px;
height:100px;
line-height: 100px;
overflow:hidden;
zoom:1;
}
/*整个导航条右浮动，但是里面的li元素进行左浮动，使之在一条线上*/
.header li{
width:100px;
float:left;
position:relative;
text-align:center;
}
.header li:hover{
background-color: #000;
}
.header .nav a{
color:white;
}
.banner{
width:100%;
}

/*实现图片垂直方向压缩的功能*/
.banner .top{
width:100%;
height:500px;
}
.banner .top img{
width:100%;
height:100%;
}

/*设置遮罩效果*/
.banner .topLayer{
/*#000-黑色，#fff-白色*/
background-color: #000;
width:100%;
height:500px;
opacity:0.4;
position:absolute;
/*top:100px;是因为脱离了自然流，将导航条部分也遮住了*/
top:100px;
left:0;
}
.banner .topLayer-top{
width:500px;
height:300px;
position:absolute;
/*先将元素左上角居于父元素正中间，再根据该元素的宽度高度进行偏移*/
top:350px;/*导航条高度100px+banner高度的一半250px*/
left:50%; /*banner高度是设置成100%的，所以直接写50%*/
margin-top:-150px;/*需要知道该元素的高度和宽度*/
margin-left:-250px;
/*层叠次序*/
z-index: 2;
}
.banner .topLayer-top form input,textarea{
border:2px solid gray;
height:35px;
margin-bottom: 15px;
background:rgba(255,255,255,0);
color:gray;
}
.banner .topLayer-top form input:hover{
border-color: #07cbc9;
}
.banner .topLayer-top textarea:hover{
border-color: #07cbc9;
}
.banner .form1 input{
width:500px;
}
.banner textarea{
width:500px;
height:80px;
margin-bottom: 15px;
}
.banner .form2 input{
width:150px;
position:absolute;
margin-left:174px;
}
.banner .form2{
position:relative;
}
.banner .form2 input:hover{
background-color: #07cbc9;
color:white;
}
.body{
position:relative;
}
.body .about1{
position: relative;
}
.body .about1 p{
font-size:50px;
text-align:center;
padding:40px 0 0 0;
}
.body .about1 .about11{
margin-top:-20px;
padding:0;
color:#07cbc9;
}
.body .about1 .about12{
width:500px;
text-align:center;
position: absolute;
left:50%;
margin-left:-250px;
}
.body .about1 .about13{
width:1200px;
height:435px;
position:absolute;
top:240px;
left:50%;
margin-left:-600px;
overflow:hidden;
zoom:1;
}
.body .about1 .about13 .sub13_1{
width:200px;
height:435px;
font-size:2em;
text-align:center;
margin-right:50px;
float:left;
}
.body .about1 .about13 .sub13_2{
float:left;
}
.body .about1 .about13 .sub13_3{
float:right;
width:300px;
margin-right:-40px;
}
.body .about1 .about13 .sub13_3_1{
width:200px;
height:150px;
border:1px solid #07cbc9;
margin-bottom: 30px;
padding:20px 0 0 0;
}
.body .sub13_3_1 p{
font-size:40px;
text-align:center;
padding:0;
}
.body .sub13_3_1 .blue{
color:#07cbc9;
}
.body .sub13_3_1 .smaller{
font-size:20px;
}
.body .about1 .about14{
width:300px;
height:212px;
border:1px solid white;
position: absolute;
top:345px;
left:195px;
z-index: 999;
padding:35px 30px;
font-size:1.2em;
text-align:left;
}

/*.body .about1 .about14 .aboutLayer,.aboutTopLayer{
width:362px;
height:284px;
position:absolute;
margin-top:-36px;
margin-left:-31px;
}*/
.body .about1 .about14 .aboutLayer{
width:362px;
height:284px;
position:absolute;
margin-top:-36px;
margin-left:-31px;
background-color: white;
opacity: 0.5;
}
.body .about1 .about14 .aboutTopLayer{
z-index: 9;
width:345px;
height:264px;
position:absolute;
padding-top:20px;
padding-left:17px;
margin-top:-36px;
margin-left:-31px;
}
.body input{
font-size: 1.5em;
margin-top:20px;
width:150px;
background-color: #000;
color:white;
}
.body input:hover{
background-color: #fff;
color:#000;
border-color:#000;
}

.tri1,.tri2,.tri3,.tri4{
width:0;
height:0;
border-top:20px solid rgba(255,255,255,0);
border-right:20px solid rgba(255,255,255,0);
border-bottom:20px solid rgba(255,255,255,0);
border-left:20px solid #07cbc9;
top:198px;
margin-top:-10px;
position:absolute;
}
.relTri{
position:relative;
}
.about2 .relTri .special{
right:0;
border-left:20px solid rgba(255,255,255,0);
border-right:20px solid #07cbc9;
}
.body .about2{
width:100%;
height:792px;
background-color: #07cbc9;
margin-top:580px;
border-collapse: collapse;
border-spacing: 0;
padding:0;
border:0;
}

.body .about2 td{
width:25%;
color:white;
text-align:left;
height:396px;
}
img{
display:block;
}
.body .about2 td.tContent{
padding-left:30px;
line-height:30px;
}
.body .about2 p{
font-weight:bold;
font-size:25px;
margin-bottom:15px;
}
.body .about2 span.normal{
font-size:19px;
display: inline-block;
margin-bottom:15px;
}
.body .about2 span.gray{
color:rgb(213,216,210);
font-size:15px;
}
.body .about2 input{
height: 42px;
margin-left:100px;
}
.body .GALLERY{
position:relative;
}
.body .subGallery{
width:1200px;
height:640px;
position:absolute;
top:240px;
left:50%;
margin-left:-600px;
}
.subGallery table{
border-collapse: separate;
border-spacing:0;
margin:0 auto;
}
.subGallery table td{
padding-right:30px;
padding-bottom: 30px;
}
.subGallery table td.noRight{
padding-right:0;
}
.subGallery table dd{
background-color: black;
color:white;
height:50px;
padding-left: 20px;
line-height: 50px;
}
.footer{
height:70px;
width:100%;
background-color: #07cbc9;
position: absolute;
bottom: 0;
margin-bottom: -2317px;
color:white;
line-height: 70px;
text-align:center;
}

傲娇的萌 2018-09-06

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

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2018-09-06 15:55:55

你好，1、gallery这里的布局有点乱哦，建议：可以去掉定位，可参考如下，设置margin:0 auto;即可。

2、页脚部分的定位，可以直接设置固定定位，然后去掉，margin-bottom的值，例：

3、去掉.subGallery绝对定位，顶部的position：sticky，就可以了哦，这里可能由于.subGallery区域的布局错乱导致的，另，建议：顶部这里也可以直接使用固定定位。

若能帮助到你，望采纳。

祝学习愉快~

收起回答

傲娇的萌提问者 #1

嗯嗯，是这样的，多谢哈

2018-09-06 17:09:40

好帮手慕糖 2018-09-06 15:20:41

你好，“滑到gallery部分”是指点击顶部的“GALLERY”项是，可以到gallery部分对吗？现在的话，可以使用锚点来实现哦。

祝学习愉快~

收起回答

提问者傲娇的萌 #1

不是这个意思耶，我的意思是：本来将导航条部分设置了position：sticky，滑到页面的banner区、about区，都没有问题（即导航条都不会消失），但是滑到页面的gallery区，导航条定位功能就消失了（即也随着gallery区从浏览器顶部离开视线），这是怎么回事呢？不知道我这么说的详不详细。

2018-09-06 15:27:58