クロスフェードした画像の下に要素が入ってしまう

Question

要素が画像の下に隠れてしまします。

jqueryで画像四枚をクロスフェードされたのですが、以降htmlに記載したものがクロスフェードした画像の下に隠れてしまいます。

position: relative;
を使用することで一旦は上に出てくるのですが、クロスフェードした画像の下に要素を足していきたいです。

以下のコードの場合、どこを直せばよいのでしょうか？
bodyタグにはbackground-colorしか指定しておりません。

        <div class="top-imgs">
            <img src="./image/？？？.jpeg">
            <img src="./image/？？？.jpeg">
            <img src="./image/？？？.jpeg">
            <img src="./image/？？？.jpeg">
            <img src="./image/？？？.jpeg">
            <p>？？？<span>？？？</span></p>
        </div>

.top-imgs {
　　　ここは使うか不明のためコメントアウト
	/* position: relative; */
}


.top-imgs img {
	height: 100vh;
	width: 100%;
	object-fit: cover;
	position: absolute;
}

(function(){
    // 設定
    var interval = 3000; 
    var fade_speed = 1000;
    $(".top-imgs img").hide();
    $(".top-imgs img:first").addClass("active").show();
    
    var changeImage = function(){
            var $active = $(".top-imgs img.active");
            var $next = $active.next("img").length?$active.next("img"):$(".top-imgs img:first");
       
            $active.fadeOut(fade_speed).removeClass("active");
            $next.fadeIn(fade_speed).addClass("active");
    }
    
    
    setInterval(changeImage,interval);
    }());

Answer 1

z-indexで画像は背面に移動させたらどうでしょう。

.top-imgs img {
	height: 100vh;
	width: 100%;
	object-fit: cover;
	position: absolute;
        z-index: -1; /* 追加 */
}