Je pense que la meilleure façon de le démontrer est exemple jsfiddle. Comme vous pouvez le constater dans cet exemple, le premierl'image s'estompe au fur et à mesure que la seconde apparaît, mais la deuxième image pousse également la première image vers le bas. Après cela, l'image qui est actuellement affichée disparaîtra instantanément lorsque l'image suivante commencera à apparaître. De plus, StackOverflow demande du code avec des liens jsfiddle, alors voici mon HTML:

<div id="slideshow">
<img width="400px" src="/images/https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="/images/https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="/images/http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" />
<img src="/images/https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div><!--slideshow-->

et voici mon JQuery:

$(function () {
//make the div take up the space given
$("div#slideshow").width("100%");
//make each slide fits within that div easily
$("div#slideshow > img").width("60%");
//hide the first image
$("#slideshow img:gt(0)").hide();
setInterval(function () {
//put each slide up for six seconds and cause it to fade out while the
//new one fades in over a period of two seconds
$("#slideshow :first-child").fadeTo(2000, 0)
.next("img").fadeTo(2000, 1).end().appendTo("#slideshow");
}, 6000);
});

Je veux que les images passent au-dessus de chacuned'autres uniformément, mais je veux le faire sans modifier les propriétés de style de position CSS du div parent et ses images. La raison pour laquelle je n'aime pas formater les images pour avoir le position:absolute car elle sépare le diaporama de la page Web. Je n'aime pas devoir repositionner le diaporama chaque fois que je change quelque chose sur ma page Web. J'apprécie grandement toute aide que vous pouvez apporter, même si vous pouvez préciser que ce que je demande est impossible.

Réponses:

Ajoutez simplement ce CSS. Je sais que vous ne vouliez pas utiliser le positionnement, mais il n'y a aucun moyen de contourner cela. Cependant, en définissant la position: relative sur le div #slideshow, les éléments img sont absolument positionnés par rapport au conteneur #slideshow, ce qui signifie que vous pouvez déplacer le # contenant le diaporama n'importe où et les éléments img suivront.

position: relative;

}

diaporama img {

position: absolute;
top:0;
left:0;

}

Voici le violon modifié: https://jsfiddle.net/75wczrw7/5/