2016-07-14 8 views
-1

私は親div - myCcontainerを持っていて、私は子div - div2を持っています。 親divを移動したとき、子divは同じ位置を占め、親はどこかに移動する必要があります。 JavaScriptでこれを行うにはどうすればよいですか?する方法divを親divからカップルとデカップル?

  <!DOCTYPE html> 
      <html> 
      <head> 
      <style type="text/css"> 


      .cpdiv{ 
        background-color: yellow; 
        width:150px; 
        height:150px; 
         border: 2px solid black; 
      } 
      #myContainer { 
       width: 500px; 
       height: 500px; 
       position: relative; 
       border: 2px solid #222333; 
      } 
      #container { 
       width: 100%; 
       height:100%; 
      } 
      </style> 
      </head> 
      <body> 
      <div id="container" > 
       <div id="myContainer" > 
        <div > 
         <button id="btn3" onclick="myMove()">Move</button> 
        </div> 

        <div class="cpdiv" id="div2"> 
         <label>hai</label> 
        </div> 
       </div> 

      </div> 

      <script> 
      function myMove() { 
       var elem = document.getElementById("myContainer"); 
       document.getElementById("div2").style.position = "fixed"; 
       var pos = 0; 
       var id = setInterval(frame, 10); 
       function frame() { 
       if (pos == 150) { 
        clearInterval(id); 
       } else { 
        pos++; 
        elem.style.top = pos + 'px'; 
        elem.style.left = pos + 'px'; 

       } 
       } 
      } 
      </script> 
      </body> 
      </html> 
+0

を私たちにあなたがこれまでにしようとしているコードを表示してください? –

答えて

0

は少しあなたのCSSを変更:

  .cpdiv{ 
       background-color: yellow; 
       width:150px; 
       height:150px; 
       border: 2px solid black; 
       top: 20px; 
       left:20px; 
     } 
関連する問題