要素の現在の位置にピクセルを追加するにはどうすればよいですか？

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

この。

私はコンテナとリファレンスとしてドキュメントを取って画像leftプロパティを取得するために.offset()プロパティを使用する必要があります。

そして、私はcontainerは、（容器がabsolute画像のrelative親であるように）左側に配置されたとき、それが配置されることになるので、0に画像のleftプロパティを設定しなければなりません。

その後、コンテナとイメージのオフセットの差を取得してイメージの実際の位置をそのコンテナに合わせて差し引き、この値をイメージのleftプロパティに設定します。

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

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

そして更新JSFiddle：ここ

は、私が追加したコードです。

Answer 2

画像にから開始する絶対的な水平位置付け：左に45px . but when you add pixel to existing one and to avoid moving position can be done adding important`：！それはすなわちleftを変更する習慣さえピクセルを追加するように、初期位置で画像を維持するために

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

Answer 3

てみてください最後に、証明の多くの後、私は得るために回避策を持っている

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

Jsfiddle