使用Dojo工具包进行动画处理时，Divs重叠

Question

我正在使用Dojo Toolkit学习动画。我正在尝试使div动画。我创建了两个div的上下div。当我为上部div创建动画对象时，下部div移动到上部div空间并相互重叠。如何防止较低的div移动到较高的div位置，同时动画较高的div。

我想解决的代码就在这里。

jsfiddleDOTnet/Mostwanted_cJ/26rhq/

Answer 1

的问题是，为了使DOM节点移动像动画，他们给它下面的内联CSS：position: absolute。由于这个原因，它会从正常流程中“移除”，所以你的第二个div不会意识到第一个div，所以它们会重叠。

要解决此问题，您应该将#box1包装在position: relative的container-div中。您的#box2将知道该容器，并且您的#box1相对于您的容器定位。完整的HTML是：

<div class="container"> 
    <div id='box1'></div> 
</div> 
<div id='box2'></div> 

而CSS将是：

#box1 { 
    width: 300px; 
    height: 100%; 
    background-color: #FF0000; 
} 
#box2 { 
    width: 300px; 
    height: 300px; 
    background-color: #686868; 
} 

.container { 
    position: relative; 
    height: 300px; 
} 

正如你可以看到我也稍微改变了height。你需要给你的容器一个高度，这样#box2将被正确定位。现在，因为您给容器一个height，您可以将的#box1更改为100%。因为它与容器相对，所以100%等于300px。

我也更新了你的JSFiddle。