Мисля, че най-добрият начин да се демонстрира това е с a jsfiddle пример, Както може да забележите от този пример, първатаизображението избледнява, докато второто избледнява, но второто изображение също натиска първото изображение надолу. След това изображението, което се показва в момента, незабавно ще изчезне, когато следващото изображение започне да избледнява. Също така, StackOverflow изисква код с jsfiddle връзки, така че тук е моят 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-->

и ето моят 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);
});

Искам изображенията да преминат отгоре на всякодруго равномерно, но искам да направя това, без да променя свойствата на стила на CSS стил на родителския div и това са изображения. Причината не искам да форматирам изображенията, за да има position:absolute свойство е, защото разделя слайдшоуто от уеб страницата. Не ми харесва да трябва да препозиционирате слайдшоуто всеки време променям нещо на своята уеб страница. Изключително ценя всяка помощ, която можете да окажете, дори ако можете да изясните, че това, което искам, е невъзможно.

Отговори:

Просто добавете този CSS. Знам, че не сте искали да използвате позициониране, но няма начин да го заобиколите. Въпреки това, като зададете позиция: относително в divs #slideshow елементите на img са абсолютно позиционирани спрямо контейнера #slideshow, което означава, че можете да преместите # слайдшоу контейнер навсякъде и елементите на img ще последват.

position: relative;

}

слайдшоу img {

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

}

Ето модифицираната скрипка: https://jsfiddle.net/75wczrw7/5/