html - 如何在相对定位的 div 下面堆叠一个 div？

Question

我有一个相对定位的图像幻灯片(该容器内的图像是绝对定位的。出于某种原因，我下面的 div 没有正确垂直堆叠。 在下面的代码中，我希望我的#wrapper div 中的所有内容都位于 .images 下方，但由于某种原因它重叠地堆叠在它后面。

HTML:

<div class="images">
    <ul id="slideshow">
        <li><img src="" class="slide" alt="first"/></li>
        <li><img src="" class="slide" alt="second"/></li>
    </ul>   
</div> 
<div id="wrapper">
    <section class="text">
            <h1>text</h1>
    </section>
</div>

CSS:

#slideshow {
    position:relative;
}

#slideshow img {
    position:absolute;
}

Answer 1

这是因为您对图像进行了绝对定位。尝试为您的#slideshow 添加一些高度

#slideshow {
    position:relative;
    height: [height of image in pixels]px;
}

#slideshow img {
    position:absolute;
}