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

将图像设为绝对水平位置，从以下位置开始：

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

Answer 2

尽量保持图像的初始位置，以便即使添加像素也不会改变，即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

Answer 3

最后，经过大量证明，我得到了一个解决方法来实现这个目标。

我必须使用.offset()属性来获取容器和图像 *apply()属性作为文档的参考。

然后，我必须将图像的left属性设置为0，因为当left位于左侧时（因为容器是container父级，它将被定位）的relative图像。）

之后，只需减去两个值，即可获得容器偏移量与图像之间的差异，以获得图像与容器的实际位置，并将此值设置为图像的absolute属性。

以下是我添加的代码：

left

更新后的JSFiddle。

如何将像素添加到元素的当前位置？

3 个答案: