老师为什么我给底部设置了绝对定位它还是不在底部

老师为什么我给底部设置了绝对定位它还是不在底部

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

  body{

      margin:0px;

      padding:0px;

  }

  .header a,.footer a{

      color:white;

    }

    a{text-decoration: none;}

    a:hover{color:blue;}

  .left a,.right a{

    color:black;

    font-family:微软雅黑; }

  ul{list-style:none;}

  .header{

      width:100%;

      height:100px;

      background:black;

      overflow: hidden;

  }

  .header img{float:left;}

  .header li {

      float:right;

      margin:20px;

 }

 .sidebar{

  width: 100%;

  height: 500px;

  background: #86e1f5;

  overflow: hidden;

  zoom:1;

  padding-top:150px;

  padding-left:40PX;

  position: relative;

  }


 .left span{

  background: pink;

  margin-right: 20px; 

  float:left;

 }

 .left{

  float: left;

  height: 100%;

  width: 60%;

  line-height:30px; 

 }

 .right{

  float: right;

  width: 40%;

 }

    /*此处写代码*/

.footer{

  width: 100%;

  height: 100px;

  background:black;

  position: absolute;

  bottom: 0px;

  overflow: hidden;

  zoom:1;

}

.footer li{

  float:left;

  margin-right:30px;


}

  </style>

</head>

<body>

    <div class="header">

        <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">

        <ul class="nav">

            <li><a href="#">手记</a></li>

            <li><a href="#">猿问</a></li>

            <li><a href="#">实战</a></li>

            <li><a href="#">职业路径</a></li>

            <li><a href="#">课程</a></li>

        </ul>

    </div>

    <div class="sidebar">

    <div class="left">

        

         <ul>

             <h3>课程推荐</h3>

             <li><a href="#"><span>职业路径</span>HTML和CSS实现动态网页</a></li>

             <li><a href="#"><span>职业路径</span>零基础入门android语法与界面</a></li>

             <li><a href="#"><span>职业路径</span>ios基础语法与常规控件</a></li>

             <li><a href="#"><span>职业路径</span>PHP入门开发</a></li>

             <li><a href="#"><span>职业路径</span>JAVA入门开发</a></li>

         </ul>

    </div>

    <div class="right">

        <h3>相关课程</h3>

        <a href="#">HTML</a>

        <a href="#">CSS</a>

        <a href="#">JavaScript</a><br>

        <a href="#">HTML5</a>

        <a href="#">CSS3</a>

        <a href="#">Jquery</a><br>

        <a href="#">移动端基础</a>

        <a href="#">移动端app开发</a>

    </div>

  </div>

    <div class="footer">

        <ul>

            <li><a href="#">网站首页</a></li>

            <li><a href="#">企业合作</a></li>

            <li><a href="#">人才招聘</a></li>

            <li><a href="#">联系我们</a></li>

            <li><a href="#">常见问题</a></li>

            <li><a href="#">友情链接</a></li>

        </ul>

        

    </div>

    

  <!-- 此处写代码 -->

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

你好 , 不太清楚同学说的尾部定位到页面顶部具体指定位到哪里 , 因为尾部在正常的文档流中已经是在页面的最下面了 ,所以不需要设置定位 . 如果想让尾部固定在浏览器窗口的底部 , 那就需要使用固定定位了 . 在本练习中 ,尾部是不需要使用定位的 ,去掉定位即可 .

absolute相对定位是参照离它最近的已定位的祖先元素定位 ,如果前面没有定位的祖先元素 , 会默认参照html, body定位 . 但是由于浏览器用户代理的不同 , 有的浏览器是参照整个面板定位的 , 也就是参照浏览器可视区域定位的 . 

例如你的浏览器窗口高度为1000px , 那么尾部的bottom:0 ,就相当于top:1000px .这个1000px也不是固定的 , 如果你浏览器高度变小了 , 那么它的定位的高度也会变小的 .

希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .

好帮手慕夭夭 2018-11-27 10:35:19

你好同学 ,absolute相对定位是参照离它最近的已定位的祖先元素定位 ,而不是浏览器视口定位 . 如果想让尾部固定在浏览器视口的底部 ,需要使用固定定位 ,如下修改;

http://img1.sycdn.imooc.com//climg/5bfcabbb0001d8a904630254.jpg

初始化清除默认的样式可以使用*给所有的元素设置 ,而不是单单给body设置 ,因为页面中其他的标签元素也会有默认间距 , 例如ul :

http://img1.sycdn.imooc.com//climg/5bfcac630001dd0d02980207.jpg

尾部的内容如下设置居中显示:

http://img1.sycdn.imooc.com//climg/5bfcacd500013a1c08100545.jpg

头部文字也如下设置行高垂直居中显示

http://img1.sycdn.imooc.com//climg/5bfcad590001b81c03600225.jpg

完善一下吧 , 祝学习愉快 ,望采纳 .

  • 提问者 qq_命运_szFJMV #1
    老师假如不想相对视口定位,我想定位到网页底部则么实现呢? 还有就是absolute相对于最近定位祖先元素可是我前面并没有设置相对定位啊 然后没有最近定位祖先元素会认body为父元素那么相对于body的话设底部为0不应该就在网页底部没有空隙吗?
    2018-11-27 21:47:41
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师