Stop Relative Positioned Div Overlapping Other Divs

I have three divs stacked on top of each other (top, middle, bottom). In the middle div, I have an image crossfade using Javascript adapted from this fiddle by jfriend00.

The middle div has the position set to relative and the images within are all set to absolute. However what is happening is that that middle div is overlapping the bottom div.

I have mostly read that to contain absolutely positioned elements you must use a relative container, which I’ve used, however, I don’t understand why my middle div is not flowing and stacking nicely between the top and bottom divs?

If I add a static height of 583px and width of 940px to the container, it flows correctly but doesn’t respond. Ideally, it needs to work with a percentage width.

Here is what I have tried:

.container {position: relative; font-size: 0; width: 100%;}

/*.container {position: relative; font-size: 0; height: 940px; width: 583px;} this stops the box responding, which isn't what I want */

.slide {
border: none; 
opacity: 0; 
position: absolute; 
width: 100%;
top: 0; 
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}

.showMe {opacity: 1;}

.top {display: block;}

.bottom {display: block;}



<div class="top">
        This is some test content. Top.
</div>

<div class="container">
   <img id="slideimg0" class="slide showMe" src="https://dummyimage.com/940x583/red/fff.jpg">
   <img id="slideimg1" class="slide" src="https://dummyimage.com/940x583/000000/fff.jpg">
   <img id="slideimg2" class="slide" src="https://dummyimage.com/940x583/6b6b24/fff.jpg">
   <img id="slideimg3" class="slide" src="https://dummyimage.com/940x583/fefe03/fff.jpg">
   <img id="slideimg4" class="slide" src="https://dummyimage.com/940x583/094fae/fff.jpg">
   <img id="slideimg5" class="slide" src="https://dummyimage.com/940x583/fa132e/fff.jpg">
   <img id="slideimg6" class="slide" src="https://dummyimage.com/940x583/a90cba/fff.jpg">
</div>

<div class="bottom">
        This is some test content. Bottom.
</div>

Here is a fiddle to demonstrate the problem.

Would really appreciate any help with this one.



Here! Just make one of the slides relatively positioned, so that it can give its parent container its height!

https://jsfiddle.net/4ycxayb2/3/

Just add this:

.slide:last-child {
  position: relative;
}

This is what you want ?