3-3关于右侧定位的一点问题

3-3关于右侧定位的一点问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin:0;
        padding:0;
    }
    .header{
      background-color:black;
        width:100%;
        top:0;
        position:fixed;
        height:80px;
        min-width: 800px;
     
    }
    .logo{
        float:left;
    }
    .header img{
        height:80px
    }
    .nav{
        float:right;
        line-height:80px;
    }
    li{
     display:inline;
        padding:0 20px;
    }
    a{
        color:white;
    }
    .header a:hover{
        color:orange;
        
    }
    .container{
        background-color:#ececec;
        height:1000px;
        top:80px;/*这里设置距离顶部的距离 但是似乎没有用 还是用最上部开始*/
        margin:80px 0px;/*marginy有用top bottom没用为什么呢?*/
        min-width: 800px;
        padding:0px 220px 0px 200px;
    }
    .footer{
        height:80px;
       background:black;
        min-width: 800px;
        bottom:0;
        width:100%;
        position:fixed;
        line-height:80px;
        text-align:center;
    }
    .middle,.right,.left{
        float:left;
        min-height:300px;
        position:relative;
    }
    .middle{
        background-color:#CC99CC;
        width:100%;
  
    }
    .left{
        width:200px;
        background-color:#FFFF99;
        margin-left:-100%;
        left:-200px;
      
    }
    .right{
         width:220px;
        margin-left:-220px;  
        right:-220px;
/*       margin-left:-220px; 
       margin-right:-100%;*/
        
 

        background-color:#66FFFF;

    }
    
        .login-buttom{

        color:white;
        background-color:red;
        text-align:center;
    }
    input{
        margin:10px 0px;
        height:25px;
        width:80px;
    }
    form{
        padding:10px;
    }
        .left a{
       
        margin-right:10px;
        background-color:orange;
    } 
    .middle img{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        width:200px;
        height:200px;
    }

  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
      <div class="logo">
      <a>
         <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
      </a>
      </div>
      <div class="nav">
          <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>
          </ul>
      </div>
  </div>
  <div class="container">
      <div class="middle">
          <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
      </div>
      <div class="left">
                      <dl>
                <dt>推荐课程</dt>
                <dd><a>职业路径</a>html and css3</dd>
                <dd><a>职业路径</a>android</dd>
                <dd><a>职业路径</a>ios</dd>
                <dd><a>职业路径</a>php</dd>
                <dd><a>职业路径</a>java</dd>
            </dl>
      </div>
      <div class="right">
                         <form>
                <h2>登录</h2>
                <div><input type="text" name="username" placeholder="请输入登录邮箱/手机号">
                <div><input type="password" name="password" placeholder="6~16位密码,区分大小写,不能用空格"></div>
                <div><input type="submit" value="登录" class="login-buttom"></div></div>
            </form>
      </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>
    </ul>
  </div>
</body>
</html>

问题1:用下图图似乎也能达到效果 这样可以么?和老师方法比有什么区别?http://img1.sycdn.imooc.com/climg//5948874f00018ef115550359.jpg


问题2:在定位右侧右侧div的时候,视频用的margin-left:-220px,但是用margin-left:-100%却是图2效果,这是为什么?

http://img1.sycdn.imooc.com/climg//5948874f0001e25415830378.jpg


正在回答 回答被采纳积分+1

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

1回答
提问者 精慕门6590561 2017-06-20 10:32:05

补充一个问题 ,当三个高度都给了100%,滚动的时候会遮盖掉导航条,给导航条设置z-index后就看起来可以了 这个现实顺序该怎么理解呢?

  • 因为你在header里面设置了position:fixed;position:fixed;是有层级的。默认层级是0,当三个高度都给了100%,滚动的时候会遮盖掉导航条。希望对你有帮助~
    2017-06-20 21:15:30
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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