js下marginLeft的问题

定位的位置设置，是top和left,bottom和right定位的看下:http://www.w3school.com.cn/css/pr_class_position.asp你设置的marginTop和marginLeft，是外边距。
http://www.w3school.com.cn/css/css_margin.asp赶紧补基础知识。

解决方案 »

  1.   

    这里，
    把你的marginLeft改成left，
    marginTop改成top。
      

  2.   


    position:absolute;
    top:0px;
    left:0px;
    margin-left:10px;
    margin-top:10px;这个效果 可能就是 楼主想要的
      

  3.   

    为什么改成left和top之后没有用呢？动态创建的图片在（0，0）位置。用marginLeft和marginTop就可以。
      

  4.   

    有用，只是margin-top你设的太小，你自己没发觉。
    #p1c   top:30px;   margin-top:50px;
    http://www.w3schools.com/css/css_boxmodel.asp<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
    #p1 {
    width:200px;
    height:150px;
    background-color:#ee9;
    position:relative;
    }
    #p1c {
    width:50px;
    height:50px;
    background-color:#55e;
    margin-top:50px;
    position:absolute;
    top:30px;
    }
    #p2 {
    width:200px;
    height:150px;
    background-color:#ea9;
    position:relative;
    }
    #p2c {
    width:50px;
    height:50px;
    background-color:#55e;
    margin-top:50px;
    position:absolute;
    top:80px;
    }
    </style>
    </head>
    <body><div id='p1'>
    <div id='p1c'></div></div>
    <div id='p2'>
    <div id='p2c'></div></div>
    </body>
    </html>
      

  5.   

    这东西看英文好，中文翻译过来，有些重要细节省掉了，上面那篇有一句，我觉的对我来说比较重要的。
    Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
    是clear 
    不是occupy.所以说是可共用的。
      

  6.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html><body>
        <div id="player-container" onclick="actClick();" style="width:560px;height:560px;position:relative;border:1px #CCC solid;margin-left:auto; margin-right:auto;">
    <img id='img1' style="position:absolute;z-index:8;margin-left:188px;margin-top:60px;width:25px;height:25px;background-color:gray;"  src="images/img1.png" />
        
    </div>
    </body></html>
    <script language="JavaScript" type="text/javascript" >
    var i=1;
    function actClick()
    {
          var sId=document.getElementById("player-container");
          var img1=document.getElementById("img1");
    //动态创建img2
          var temp = document.createElement("img");   
      i+=1;
          temp.id = "img"+i;   
          
      sId.appendChild(temp); 
          var img2=document.getElementById(temp.id);
     // 设置img2属性 
          img2.position="absolute";   
      img2.style.zIndex=i;
      img2.src="images/img2.png";    
      img2.style.width='60px';
          img2.style.height='60px';      
          img2.style.left='188px';
          img2.style.top='60px'; 
          //img2.style.marginLeft="88px";
          //img2.style.marginTop="60px";       img1.style.width='25px';
          img1.style.height='25px';      
          img1.style.marginLeft='188px';
          img1.style.marginTop='60px';  
    }
    </script>
      

  7.   

    为什么上面的js设置left top没有效果呢？
      

  8.   

    img2.position="absolute";其他所有属性都加style，为啥这里你就不加呢？img2.style.position="absolute";竟然会这么大意的。