关于position属性

2-9编程练习中：
想实现页面滚动但导航位置不变的效果。
所以在header下面设置position:fixed;top:0;
但是没有任何作用。
另外，在footer中设置了bottom:0;想实现页脚在页面下方。。打开时候是好的。但是
页面滚动之后，页脚就停在了页面中间，看起来很奇怪。。
代码如下，不知道是哪里出了问题。。希望老师指点一下~谢谢！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>两列布局</title>
 <style type="text/css">
  *{margin:0;padding:0;}
  html,body{width:100%;height:100%;
   font-size:24px;
   font-family:"新蒂下午茶白金版";
      color:white; 
  }
  
  .header{
   width:100%;
   height:100px;
      background:black;
   position:fixed;
   top:0;
   
  }
  .container{
   width:100%;
   height:800px;
   background:#FFAD46;
   color:#000000;
   font-family:"微软雅黑";
   position:absolute;
   margin-top:100px;
  }
  .footer{
   width:100%;
   height:100px;
   background:black;
   position:absolute;
   bottom:0;
  }
  .icon{
   width:25%;
   height:100px;
   background:url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;
   float:left;
  }
  .items{
   width:35%;
   float:right; 
   position:absolute;
   top:50%;
   right:1%;
   margin-top:-20px;
  }
  li{
   float:left; 
   margin-left:37px;
   list-style:none;
  }
  .link{
   width:60%;
   margin:0 auto; 
   left:0;
   right:0;
   position:absolute;
   top:50%;
   margin-top:-20px;
  }
  .list1{
   width:28%;
   position:absolute;
   top:100px;
   left:22%;
   font-size:15px;
  }
  .list2{
   width:28%;
   position:absolute;
   top:100px;
   right:22%;
   font-size:15px;
  }
  
  dt{
   font-size:22px;
}
  dd{
   margin-top:20px;
  }
  span{
   background:lightgreen;
  }
  
 </style>
</head>
<body>
 <div class="header">
  <div class="icon"></div>
  <ul class="items">
   <li>课程</li>
   <li>职业路径</li>
   <li>实战</li>
   <li>猿问</li>
   <li>手记</li>
  </ul>
 </div>
 <div class="container">
  <dl class="list1">
   <dt>课程推荐</dt>
   <dd><span>职业路径</span> HTML5与CSS3实现动态网页</dd>
   <dd><span>职业路径</span> 零基础入门Android语法与界面</dd>
   <dd><span>职业路径</span> ios基础语法与常用控件</dd>
   <dd><span>职业路径</span> PHP入门开发</dd>
   <dd><span>职业路径</span> JAVA入门开发</dd>
  </dl>
  <dl class="list2">
   <dt>相关课程</dt>
   <dd>HTML CSS JavaScript</dd>
   <dd>HTML5 CSS3 Jquery</dd>
   <dd>移动端基础 移动端APP开发</dd>
  </dl>
 </div>
 <div class="footer">
  <ul class="link">
   <li>网站首页</li>
   <li>企业合作</li>
   <li>人才招聘</li>
   <li>联系我们</li>
   <li>常见问题</li>
   <li>友情链接</li>
  </ul>
 </div>
</body>
</html>

hhhhhhhiro 2018-05-29

源自：CSS网页布局基础 2-10 编程练习

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-05-29 15:14:00

经过测试 ,代码问题和建议如下:

因为container也设置了定位 ,所以页面滚动时会把导航挡住 , 所以导航可以设置z-index
尾部设置了绝对定位 , 想让尾部固定在下面 ,改为fixed就可以了

自己完善一下吧 ,祝学习愉快 !

收起回答

hhhhhhhiro 提问者 #1

谢谢老师~ 我想追问一下。页脚的position属性中，如果设置成绝对定位。。这个时候它的参考对象，感觉不是body也不是HTML呢。

2018-05-29 15:29:55
好帮手慕夭夭回复提问者 hhhhhhhiro #2

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块(代码中最初的包含块是html)。

2018-05-29 16:27:29