How to stack a div below a relatively positioned div?

Question

I have an image slideshow that is positioned relatively (images within that container are positioned absolutely. For some reason, my divs below are not stacking vertically properly. In the code below, I'd like everything in my #wrapper div to go below the .images, but for some reason it is stacking behind it with overlap.

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

It's because you're positioning the images absolutely. Try adding some height to your #slideshow

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

#slideshow img {
    position:absolute;
}

Answer 2

#slideshow {
    position: relative;
    height: 300px;  /*height of img*/
    list-style: none;
}
ul#slideshow li{
    display: block;
    height: 120px;
}
#slideshow img {
    position:absolute;
    max-width:100%;
    max-height:100%;
    margin: auto;
    top: 0;
    bottom:0;
    left:0;
    right:0;
    display: block;
}