Javascript 用另一个移动的div影响div容器的移动

对不起，标题很混乱。但是，你可以理解我的意思

我试图做到的是，一旦黑色容器接触到红色容器，就移动它。也就是说，我不希望红色容器与黑色容器重叠，我尝试相对于红色容器的位置移动红色容器。 我可能确信，这可以通过使用普通CSS和浮动/边距/显示调整来实现，而我现在无法生成这种调整

代码如下：

JavaScript

var speed =80, deg=0, center={x:50,y:50},
        moveBox = function(){
            var el = document.getElementById("circle"),
                left = el.offsetLeft,
                moveBy = 3; 
                deg+=moveBy;
                el.style.left =center.x+Math.floor(40*Math.sin(deg/150*Math.PI))+"px";
                el.style.top =center.y+Math.floor(20*Math.cos(deg/150*Math.PI))+"px";
        };

var timer = setInterval(moveBox, speed);

HTML

<div id='square'></div>
<div id='circle'></div>

---

我一直在你的小提琴上玩弄这个，现在看来它很难被使用。要解决动画完成时div移动的问题，可以在其上放置相对/绝对css位置。但当你这么做的时候，它打破了该死的循环

---

因此，如果你能想出如何使圆在没有css位置的情况下工作，那么它应该自己工作。很抱歉，没有为您找到简单的解决方案。

没有看上去那么简单。首先，具有绝对定位的元素从正常文档流中取出。此外，相对定位不会影响文档流（它们在文档流中的位置与静态位置相同）。用CSS做这件事需要对你的例子进行一些重构。@Fabriciomatté我想你是对的。我以为解决办法很简单，我自己也看不出来。但是，我想我必须等着看，如果有人能提出另一个选择，

#circle{background:red; display:inline-block; width:80%; height:40px; position:absolute; border:1px solid #454545; margin-top:100px;}
#square{width:60px; height:50px; background:black; display:block; position:relative; position:absolute; margin-left:100px; margin-top:100px;}