DIV不会在滑块

坐在我不能让我的#supportive DIV坐在底下它的前格和我不确定为什么：DIV不会在滑块

我会通过添加“与容限来解决这个顶部'动态在JavaScript中滑块的高度将根据屏幕大小而改变但我确定必须有一种方法在CSS中执行此操作？

将绝对定位问题当试图浮动元素'下'彼此？

这里的网站：https://dl.dropboxusercontent.com/u/4469116/new/index.html （到达的问题，请点击“项目”，然后在左上角的第一个图像）。

2016-03-31 Ben Potter

这是可能的（也可能）滑块'div'正在渲染为内联元素。尝试将此CSS添加到'supportive' div：'{clear：both;}' –

您可以提供实际的源代码而不仅仅是图像吗？ –

你正在浮动两个div，这意味着所有的效果和目的，他们的流动高度为0.要么给第一个明确的高度和'clear：both'或以另一种方式做。[在这里了解浮动。]（ https://css-tricks.com/all-about-floats/） – Robusto

你的滑块有绝对定位，因此，你必须通过应用绝对定位的项目量身高的边距，在这种情况下，弥补它的高度是围绕380px

这个CSS添加到您的样式表这一观点：

#supportive { 
    margin-top: 380px; 
}

此外，浮子没有做任何事情，我可以看到，所以你应该能够将其删除

如果您想您的解决方案不是固定不变的，与你当前的标记简单的方法就是给予滑块的百分比高度，然后给日·E #supportive节点的上边距

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

#supportive { 
     margin-top: 30%; 
}

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

2016-03-31 23:49:30

这个解决方案看起来不错，@Alpha G33k - 但是我想知道是否有一个解决方案不像应用永久性边缘顶部那样“固定”，因为此滑块会改变移动的高度和宽度...？ –

滑块下面的div出现在顶部，因为滑块和子元素（图像）的位置都是：absolute;

设置#slider相对定位可以解决这个问题。如果你在一个位置使用绝对位置：相对位置：绝对位置绝对位于相对位置的父对象内。

其它选项考虑：代替<img>元件，设置一个的div的背景图像的属性是图像（这将与东西帮助像裁剪定位所述图像）

的另一种技术，其可以帮助将添加填充到父位置的底部：相对元素和位置的子文本（#supportive）绝对;底部：0;高度：padding在父母的底部

2016-04-01 00:24:18 admcfajn

回答