DIV不会坐在滑块下面

Question

我无法让我的#supportive DIV坐在它前面的div之下，我不确定为什么：

我打算通过在javascript中动态添加'margin-top'来解决这个问题，因为滑块的高度会根据屏幕大小而改变但是我确定必须有一种方法可以在CSS中执行此操作吗？

尝试将元素浮动到彼此之下时，绝对定位会成为问题吗？

这是网站：https://dl.dropboxusercontent.com/u/4469116/new/index.html （要解决问题，请点击'项目'，然后点击左上角的第一张图片。）

Answer 1

您的滑块具有绝对定位，因此您必须通过应用绝对定位项高度的边距顶部来补偿其高度，在这种情况下它大约为380px

将此CSS添加到该视图的样式表中：

#supportive {
    margin-top: 380px;
}

此外，浮动没有做任何事情，因为我可以看到你应该能够删除它

如果您希望解决方案不固定，那么使用当前标记的简单方法是为滑块指定一个百分比高度，然后给出＃e #supportive节点的边距

.slider {
  height: 30%;
  width: auto;
}

#supportive {
        margin-top: 30%;
 }

或者您可以将.slider放在单独的容器中，并为容器提供所需的尺寸。这样，您的节点将始终位于底部，并且.slider的容器将处于文档的自然流程中。