Javascript 移动父DIV而不影响子DIV

我有DIV和一些DIV，属性为“position:absolute”。所有元素的大小和坐标都是已知和固定的。我必须移动父DIV，但用户必须认为所有子DIV在视觉上都保持在原来的位置

这似乎很容易，但所有内部DIV的坐标也必须更改，并且精确地更改父DIV移动的距离（该距离是已知的，例如20px）

我曾尝试更改父DIV的CSS，并在循环中更改所有子元素的坐标，但效果并不理想-我仍然可以看到子元素是如何移动的（移动很快，但不是看不见的）。我想用一个简单的动作来移动父DIV，但是所有内部DIV都会自动改变它们的位置，没有人会注意到这一点。我该怎么做？表现很重要

代码示例：

<div id="parent" style="position:absolute; top:50px; left:100px; width:500px; height:300px;">
    <div id="child1" style="position:absolute; top:10px; left:15px; width:20px; height:20px;"></div>
    <div id="child2" style="position:absolute; top:10px; left:55px; width:20px; height:20px;"></div>
</div>

---

在子元素中尝试使用css

位置：相对？
并使用宽度和高度的百分比。
您可以为任意项目实现这一点（即，不知道其起始位置、有多少子项或这些子项的起始位置）您希望我使用CSS的
translateX
功能-将父对象向右移动给定数量的像素，然后使用该数字的负数将子对象向左移动，使其看起来是静态的

我在下面提供了几个示例，前两个是由JavaScript事件触发的（为了简单起见，它们都是通过单击一个按钮触发的），第一个是“跳跃”跨越，第二个是使用
transition
进行动画跨越，第二个是使用CSS中的鼠标动作触发的，第一个在
：悬停
，第二个在
：聚焦

如果你想玩的话

更新：每次单击按钮，父对象都会向左移动


document.getElementById（“按钮”）.addEventListener（“单击”），函数（事件）{
var divs=document.queryselectoral（“.event”），x=divs.length；
而（x-）
divs[x].classList.toggle（“shift”）；
event.preventDefault（）；
},0);
/**父母**/
.搬家{
边框：2倍实心#000；
高度：70像素；
填充：40px 10px 10px；
位置：绝对位置；
宽度：250px；
}
.move:类型{left:20px；top:50px；}的第一个
.move:n类型（2）{left:30px；top:130px；}
.move:n类型（3）{left:40px；top:210px；}
.move:n类型（4）{left:50px；top:290px；}
/**孩子们**/
.move>div{
背景：#000；
高度：20px；
位置：绝对位置；
顶部：10px；
宽度：20px；
}
.move>div:first child{left:15px；}
.move>div:n子级（2）{left:45px；}
.move>div:n子级（3）{left:75px；}
.move>div:n子级（4）{left:105px；}
/**动画**/
.animate、.animate>div{
过渡：变换。5s线性；
}
/**转化**/
.shift、.hover:hover、.focus:focus{
转换：translateX（100px）；
}
.shift>div、.hover:hover>div、.focus:focus>div{
转换：translateX（-100px）；
}
/**杂项**/
钮扣{
顶部：10px；
左：10px；
位置：相对位置；
}
*{框大小：边框框；线宽：20px；边距：0；轮廓：0；}
点击我
我只是跳过去

我跨越

在我上空盘旋

点击我

发布您的代码，请与SO联系。请提供您到目前为止尝试过的代码示例，以便我们可以看到所涉及的内容。将代码示例添加到主位置如果子元素的位置使用父元素的位置作为参考点（如果父元素本身已定位，则将使用该位置），则您必须调整子元素的位置。也许有更简单的方法来实现你真正想要实现的目标——但你没有描述这一点。不是移动一个真实的父母，而是一个独立于其他人的元素，只是为了在视觉上达到相同的效果或其他什么…对不起，对我来说这看起来是可以理解的-我需要移动“父母”，但“child1”和“child2”在视觉上必须保持在屏幕上原来的位置非常好的例子，我已经检查过了，但不幸的是，div的坐标并没有改变，无论是父坐标还是子坐标。转换后，“左=45px”保持“左=45px”。稍后，我将需要将父DIV再次移动100px，并且我将无法再附加“shift”类20次，所以位置必须是changed@qwerty007这更符合你的要求吗？差不多了，毛茸茸的。正如在主要帖子中提到的那样——我已经尝试更改父DIV的CSS，并在循环中更改所有子元素的坐标，但是看起来不太好——我仍然可以看到子元素如何移动到新位置并返回到旧位置。因此，我正在寻找一种解决方案，不需要在循环中手动修改每个子对象，或者其他我开始认为这可能是硬件问题，而不是CSS问题。在转换期间，我看不到子元素的可见物理运动。无论如何，除非对孩子们使用
position:fixed
是一个可行的选择，否则在某种程度上，如果不调整孩子们的CSS，你将无法做到这一点。