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，所以您可以将height的{{1}}更改为#box1。因为它与容器相对，100%等于100%。

我还更新了您的JSFiddle。

在使用Dojo工具包进行动画制作时，Div会重叠

1 个答案: