How to add pixels to a current position of an element?

Question

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.

I have a flex container in which I have an image and a div . Both of them are centered on the container with justify-content: center; property.

The problem I have is that when I try to move the image that has position absolute , it goes back until its nearest parent that has position relative (its container) and start to add pixels there and it makes a strange visual effect.

HTML code:

<button type="button" onclick="moveImage()">Move image</button>
<div id="container">
  <div id="left" class="block">Left</div>
  <div id="center" class="block">
    <img id="image" src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="stackoverflow">
  </div>
  <div id="right" class="block">Right</div>
</div>

CSS 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;
}

Javascript 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);  
}

JSFiddle in which you can see how the image goes back until its parent and start adding pixels there.

Is there a way to avoid that the image back some pixels to its parent and start add pixels in its current position?

Thanks in advance!

Answer 1

Give the image an absolute horizontal position to start from:

#image {
  position: absolute;
  z-index: 2;
  height: 50px;
  width: 100px;
  left: 45px;
}

Answer 2

Try to keep the image with initial position so that even adding the pixel it wont change ie left :45px . but when you add pixel to existing one and to avoid moving position can be done adding . but when you add pixel to existing one and to avoid moving position can be done adding !important` to the left

#image {
  position: absolute;
  z-index: 2;
  height: 50px;
  width: 100px;
  left: 45px !important;
}

Jsfiddle

Answer 3

Finally, after a lot of proves, I have got a workaround to get this.

I have to use .offset() property to get the container and the image left property taking as reference the document.

Then, I have to set the left property of the image to 0 because it would be positioned when the container is positioned on the left (as the container is the relative parent of the absolute image).

After that, just substract both values to get the differences between the offset of the container and the image to get the actual position of the image regard its container and set this value to the left property of the image.

Here is the code that I have added:

var leftCenterDiv = $("#center").offset().left;
var leftImage = $("#image").offset().left;

$("#image").css("left", 0);
$("#image").css("left", leftImage - leftCenterDiv);

And the updated JSFiddle .