Как добавить пиксели в текущую позицию элемента?

Question

Я хочу переместить изображение из его текущего положения вправо, поэтому мне нужно добавить пиксели в левую позицию, что у него есть прямо сейчас.

У меня есть контейнер flex, в котором у меня есть image и div. Оба они центрированы на контейнере с собственностью justify-content: center;.

Проблема заключается в том, что когда я пытаюсь переместить изображение с позицией absolute, оно возвращается до ближайшего родителя, у которого есть позиция relative (его контейнер) и начинает добавлять туда пиксели, и это создает странный визуальный эффект ,

HTML код:

<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 код:

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 код:

$(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, в котором вы можете увидеть, как изображение возвращается до своего родителя и начинает добавлять туда пиксели.

Есть ли способ избежать того, что изображение вернет некоторые пиксели в его родительский элемент и начнет добавлять пиксели в текущее положение?

Заранее благодарен!

Answer 1

Наконец, после того, как много доказывает, у меня есть обходной путь, чтобы получить это.

Я должен использовать .offset() свойство для получения контейнера и изображенийleft свойства, принимая в качестве справочного документа.

Затем я должен установить left свойство изображения в 0, так как он будет установлен, когда container расположен на левом (как контейнер является relative родителем absolute изображения).

После этого просто выровняйте оба значения, чтобы получить разницу между смещением контейнера и изображением, чтобы получить фактическое положение изображения относительно его контейнера и установить это значение в свойство изображения left.

Вот код, который я добавил:

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

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

И обновленный JSFiddle.

Answer 2

Дайте изображение абсолютное горизонтальное положение, чтобы начать с:

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

Answer 3

Try, чтобы сохранить изображение с начальной позиции так, что даже добавление пикселя это обыкновение меняться, т.е. left: 45px . but when you add pixel to existing one and to avoid moving position can be done adding important` влево

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

Jsfiddle