Html 绝对定位div后的位置内容

我有一个

相对

定位div，其中包含另外三个

绝对

定位div，我将其用作滑块。三个

absolute

定位div中的每一个都包含一个宽度为100%的图像

问题是，当我想将内容放置在我的滑块下时，内容与幻灯片重叠（因为div是绝对位置，我不知道实际高度-它会变化，因为图像宽度为100%）

如何将内容定位在滑块下

目前我正在使用一个javascript函数来检索图像的高度，并将该高度作为填充添加到下面的内容中，但我更喜欢使用纯css

可能吗？（我宁愿不要使用媒体查询，因为会有很多决议需要处理）

下面是代码：（对于一个实际的例子，请检查这个提琴：）

HTML:

---

此任务不应使用

position:absolute

。为什么？因为使用

position:absolute

会从文档流中删除元素，所以浏览器会认为它们不会占用页面空间。
相反，使用

float:left

或

float:right

。它将完成相同的任务，但会导致父div增长以适应内容

像这样：

.slider {
    width:100%;
    float: left;
}

我有一个JFIDLE的更新版本，它显示了它的作用：

---

不过坦率地说，除非对布局有必要，否则我不建议这样做。使用

溢出：hidden

为包装器div设置一个固定的高度会更好，并且不会导致页面内容反弹。

使页面上的元素具有动态高度不是一个好的做法。 尝试使图像具有相同的高度，或者为幻灯片容器提供“最高”图像的高度

通常，具有淡入淡出效果的幻灯片使用

float:left，然后在最后一张幻灯片后进行一次
清除：两个

但是，如果您坚持保留该配置，并且只想快速修复，则以下代码将起到作用：

$('#slideshow').css('height', $('#slider_'+i+' img').height());

将其复制到slider_init和go_slide函数中

诚恳地说
如果您只想坚持使用纯css解决方案，只需将您的第一个滑块元素赋予
position:relative
我不完全理解问题所在。

但我试图在图片底部添加额外的内容，不重叠

（忽略javascript，仅用于演示）


var curslide=0；
var元素；
$（文档）.ready（函数（）{
元素=$（'.slider'）；
元素。隐藏（）；
元素。first（）.show（）；
$（'navigare_st'）。单击（函数（）{
如果（光标>0）{
卡斯利德——；
元素。隐藏（）；
elements.eq（curslide.show（）；
}
});
$（'navigare#u dr'）。单击（函数（）{
if（光标<元素长度）{
curslide++；
元素。隐藏（）；
elements.eq（curslide.show（）；
}
});
});
滑块{
宽度：100%；
//位置：绝对位置；
}
.滑块img{
显示：块；
保证金：0自动；
宽度：100%；
最小宽度：100px；
}
#幻灯片放映{
位置：相对位置；
背景色：白色；
z指数：100；
}
#纳维加尔街{
位置：绝对位置；
宽度：50px；
高度：50px；
z指数：1000；
左：0px；
最高：45%；
光标：指针；
边界半径：50%；
背景色：白色；
}
#纳维加鲁博士{
z指数：1000；
宽度：50px；
高度：50px；
位置：绝对位置；
变换：旋转（180度）；
右：0px；
最高：45%；
光标：指针；
边界半径：50%；
背景色：白色；
}
.额外的{
宽度：100%；
高度：50px；
最高：100%；
背景颜色：耐火砖；
边框左下半径：15px；
边框右下半径：15px；
线高：24px；
文本缩进：5px；
字体大小：20px；
}

额外的内容来了？
如果您想制作一个滑块，最好设置一个固定的高度，而不是100%，那么随着图像高度的变化，图像滑块看起来不太好。我的建议是将图像包装在一个div中（具有固定的宽度和高度），然后将图像atrib设置为100%，可能您已经知道，但是如果您制作了一个具有不同高度的图像的滑块，并且希望后面的内容跟随流，就像不使用position:absolute一样。。。你的网站的用户体验不会很好（至少可以说）。。。所有内容始终上下移动。@AlvaroMenéndez图像的高度相同，小提琴中的图像就是一个例子
.slider {
    width:100%;
    float: left;
}

$('#slideshow').css('height', $('#slider_'+i+' img').height());