Placing multiple images in the same position

The Goal I'm practicing writing my own simple JavaScript slideshow plugin, and the intended method is to have all of the images -- all of which are the same size -- in the same location on the screen (so all having the same `x` and `y` values), but alter their `z-index`es to shuffle them in front of or behind each other as necessary, cycling through each of them. The JavaScript is working well so far, but I'm not able to get the images to all layer on top of each other on the page -- they just stack, from the top of their container downward, one per line. What I've Got This is a simplified version of the relevant portion of my HTML: ``` <section> <div class="images"> <img src="1"> <img src="2"> <img src="3"> </div> </section> ``` And the CSS ``` .images { height: 15em; margin: 0 auto; overflow: hidden; width: 20em; } ``` As you can see, it's not too complex. I'm at a loss as to where to go from here, though. The only way I've been able to get the images to layer the way I want is to apply `position: absolute;` and `top: 0;` to the images, but that also throws them outside of their `div`, and then applying that to the `div` itself causes the whole layout to go into chaos. So if anyone has any advice, I'd greatly appreciate it! :)