title: How to add pixels to a current position of an element?
body: <p>I want to move an image from its current position to the right, so I need to add pixels to the left position that it has right now.</p>
  
  <p>I have a <code>flex</code> container in which I have an <code>image</code> and a <code>div</code>. Both of them are centered on the container with <code>justify-content: center;</code> property.</p>
  
  <p>The problem I have is that when I try to move the image that has position <code>absolute</code>, it goes back until its nearest parent that has position <code>relative</code> (its container) and start to add pixels there and it makes a strange visual effect.</p>
  
  <p><strong>HTML</strong> code:</p>
  
  <pre><code>&lt;button type="button" onclick="moveImage()"&gt;Move image&lt;/button&gt;
  &lt;div id="container"&gt;
    &lt;div id="left" class="block"&gt;Left&lt;/div&gt;
    &lt;div id="center" class="block"&gt;
      &lt;img id="image" src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="stackoverflow"&gt;
    &lt;/div&gt;
    &lt;div id="right" class="block"&gt;Right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong> code:</p>
  
  <pre><code>html, body{
      width: 100%;
      height: 100%;
  }
  
  #container{
      display: flex;
      height: 100%;
  }
  
  .block{
      flex: 1;
  }
  
  #left{
      background-color: red;
  }
  
  #center{
      position: relative;
      display: flex;
      background-color: yellow;
      justify-content: center;
  }
  
  #right{
      background-color: orange;
  }
  
  #divCentered{
     width: 50%;
     height: 100px;
     background-color: brown;
  }
  </code></pre>
  
  <p><strong>Javascript</strong> code:</p>
  
  <pre><code>$( document ).ready(function() {
       var divParent = document.getElementById('center');
       var div = document.createElement("div");
       div.setAttribute("id", "divCentered");
       divParent.appendChild(div);
  });
  
  function moveImage(){
    $("#image").animate({
      left: "+=300px"
    }, 1000);  
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/om6gt7z0/" rel="nofollow">JSFiddle</a> in which you can see how the image goes back until its parent and start adding pixels there.</p>
  
  <p>Is there a way to avoid that the image back some pixels to its parent and start add pixels in its current position?</p>
  
  <p>Thanks in advance!</p>