image slideshow alternative to position absolute

[Code_Monkey]

Hi, is there a way to change the css below so I can stack images on top of each other for a image slide show without using position absolute so that the images are responsive?
I'm using the following code.

HTML:

<article id="SlideShow"><img src="_Graphics/image1.jpg" alt=""/>
 <img src="_Graphics/image2.jpg" alt=""/>
 <img src="_Graphics/image3.jpg" alt=""/>
 <img src="_Graphics/image4.jpg" alt=""/></article>

Css:

#SlideShow img {
 position: absolute;
 max-width: 60em; 
}

#SlideShow img:nth-of-type(1) {
 animation-name: fader;
 animation-delay: 4s;
 animation-duration: 2s;
 z-index: 20;
}

#SlideShow img:nth-of-type(2) {
 z-index: 10;
}

#SlideShow img:nth-of-type(n+3) { display: none; }

@keyframes fader {
 from { opacity: 1.0; }
 to { opacity: 0.0; }
}

JS:

window.addEventListener("DOMContentLoaded", function(e) {

 var stage = document.getElementById("SlideShow");
 var fadeComplete = function(e) { stage.appendChild(arr[0]); };
 var arr = stage.getElementsByTagName("img");
 for(var i=0; i < arr.length; i++) {
  arr[i].addEventListener("animationend", fadeComplete, false);
 }

 }, false);

[NickMNS]

Position:absolute is absolute with respect to its nearest ancestor that is position:relative. In your case there is no ancestor that is "relative" so the absolute is applied with respect to the body. A better explanation can be found here:
[css-tricks.com...]

Why does this matters to you? You can set the parent of the slide show to position:relative and then slide show will change with respect to its parent, thus giving you the ability to control the responsiveness.

[coothead]

Hi there Code_Monkey,

you may see a basic CSS only example here...

[codepen.io ]

...and the accompanying code used here...

[codepen.io ]

birdbrain - senior member since Oct 2, 2003