title: Position of element changes after changing left and top value from pixel to percentage
body: <p>I am using <a href="http://api.jqueryui.com/droppable/" rel="nofollow">jQuery Droppable</a> and want to save the coordinates in percentage value. So I have written the code to covert the Pixel value to percentage.</p>
  
  <p>But I marked while its in (0,0) position percentage value comes perfect but as I move the element to Downward of the parent element percentage value of TOP decreasing and percentage value of Left Increasing. So at the bottom left corner element has around 12% of increased left percentage and 8% decreased top percentage.</p>
  
  <p>Update : The percentage value what I get after drag and drop, when I put that percentage value to the elements style it shifts the element towards top and right. That means top percentage value decreasing and left percentage value increasing.</p>
  
  <p>I cant find the reason why percentage value varies while the calculation remains same. Here is the code,</p>
  
  <pre><code>jQuery("#editor").droppable({
      drop: function( event, ui ) {
  
          var pos = ui.draggable.offset();
          var dPos = $(this).offset();
  
          // Pixxel value of positions
          var elementTopPosition = pos.top - dPos.top;
          var elementLeftPosition = pos.left - dPos.left;
  
          // Getting parent element height and width
          var parentWidth = jQuery("#editor").width();
          var ParentHeight = jQuery("#editor").height();
  
          // Coverting to percentage
          var topInPercentage = ( 100 * elementTopPosition ) / ParentHeight;
          var leftInPercentage = ( 100 * elementLeftPosition ) / parentWidth;
  
      }
  });
  </code></pre>
  
  <p>While I save an element position with percentage value : 
  <a href="http://www.awesomescreenshot.com/image/436490/b1b1c6c910b0f68a4199c8f67684ac56" rel="nofollow">http://www.awesomescreenshot.com/image/436490/b1b1c6c910b0f68a4199c8f67684ac56</a></p>
  
  <p>When I output that element position  with saved percentage value :
  <a href="http://www.awesomescreenshot.com/image/436526/12d4b0778240646285c6fdd10e61bd2f" rel="nofollow">http://www.awesomescreenshot.com/image/436526/12d4b0778240646285c6fdd10e61bd2f</a></p>
  
  <p><strong>Live Example</strong> (<a href="https://jsfiddle.net/kr64c5Lf/1/" rel="nofollow">fiddle if you prefer</a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#draggable").draggable();
  
  jQuery("#droppable").droppable({
      drop: function (event, ui) {
  
          debugger;
  
          var pos = ui.draggable.offset();
          var dPos = $(this).offset();
  
          // Pixxel value of positions
          var elementTopPosition = pos.top - dPos.top;
          var elementLeftPosition = pos.left - dPos.left;
  
          // Getting parent element height and width
          var parentWidth = jQuery("#droppable").width();
          var ParentHeight = jQuery("#droppable").height();
  
          // Coverting to percentage
          var topInPercentage = (100 * elementTopPosition) / ParentHeight;
          var leftInPercentage = (100 * elementLeftPosition) / parentWidth;
          
          $("#draggable").css({top: topInPercentage + '%', left: leftInPercentage + '%'});
  
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#draggable {
      width: 100px;
      padding: 2px 5px;
      cursor: pointer;
      color: #fff;
      position: absolute;
  }
  #droppable {
      position: relative;
      width: 200px;
      height: 200px;
      background: #999;
      color: #fff;
      padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="droppable"&gt;
      &lt;div id="draggable"&gt;Element&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, try moving the element in between its parent, in each move I am capturing the left top pixel value and convert it to Percentage and then apply that percentage value gain to that element. But it differs from the original postion value.</p>