img标签设置了相对定位,为什么移动不了?

<!DOCTYPE html>


<html>


<head>


  <meta charset="UTF-8">


  <title></title>


  <style type="text/css">


    *{


        margin:0;


        padding:0;


    }


    .head{


        width:100%;


        height:100px;


        background:black;

        

    }


    .logo{


        width:300px;


        height:100px;


        line-height:100px;


        background:url(http://climg.mukewang.com/58c0d2d900016ce303000100.png);


        float:left;


    }


    .banner ul{


      float:right;


    }


    .banner ul li{


        list-style:none;


        font:20px "微软雅黑";


        color:white;


        float:left;


        margin-right:60px;


        height:100px;


        line-height:100px;


        cursor: pointer;


    }

    .container{

        

        height:800px;

        font-size:16px;

        line-height:50px;

        background:skyblue;

        overflow: hidden;

        zoom:1;

        

        padding:0 250px 0 200px;

    }

    .left,.middle,.right{

      position:relative;

      float:left;

      

    }

    .left{

        width:200px;

        margin-left: -100%;

        left:-200px;

        padding:10% 5%;

        height:800px;

    }

     .middle{

      width:100%;

      height:800px;

    }  

   .img{

      position:relative;

      left:10%;

      top:5%;

     }

  

    .right{

        width:250px;

        margin-left: -250px;

        right:-250px;

        padding:10% 5%; 

        height:800px;

    }   

    .container h3{

      font-size:25px;

    }


     .left p span{


      background:pink;


     }

      input{

        width:230px;

        height:30px;

    }

    .landing{

        background:red;

        border:none;

    }



     .footer{


      width:100%;


      height:100px;


      background:black;


      text-align: center;


     }


     .footer ul li{


      list-style: none;


      font:20px "微软雅黑";


      color:white;


      display:inline-block;


      height:100px;


      line-height:100px;


      margin:0 80px;


      cursor: pointer;


     }


  </style>


</head>


<body>

     

    <div class="head">

      <div class="logo"> 

      </div>

         <div class="banner">

              <ul>

                  <li>课程</li>

                  <li>职业路径</li>

                  <li>实战</li>

                  <li>猿问</li>

                  <li>手记</li>

              </ul>

          </div>

      </div>


      <div class="container">

         <div class="middle">

             <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">

         </div>



          <div class="left">

       

              <h3>课程推荐</h3>


              <p><span>职业路径</span>&nbsp;&nbsp;HTML与CSS3实现动态网页</p>


              <p><span>职业路径</span>&nbsp;&nbsp;零基础入门</p>


              <p><span>职业路径</span>&nbsp;&nbsp;ios基础语法</p>


              <p><span>职业路径</span>&nbsp;&nbsp;PHP基础入门</p>


              <p><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</p>

           

          </div>


        


        <div class="right">

     

            <h3>登录</h3> 

            <input type="text" name="username" placeholder="请输入登陆邮箱/手机号"/>

            <br/>

            <input type="password" name="paw" placeholder="6-16位密码,区分大小写,不能用空格"/>

            <br/>

            <input type="button" name="landing" value="登录" class="landing"/>


          </div>


      </div>


      <div class="footer">


        <ul>


            <li>网站首页</li>


            <li>企业合作</li>


            <li>人才招聘</li>


            <li>联系我们</li>


            <li>常见问题</li>


            <li>友情链接</li>


        </ul> 


      </div>


 


</body>


</html>


慕村7528610
浏览 1481回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP