position:abusoluteで他の要素の上に重なってしまう

Question

前提・実現したいこと

画像複数枚がふわっと切り替わるようなスライドショーを配置したいのですが、画像が他の要素の上に重なってレイアウトが崩れてしまいます。
どうしたら良いのでしょうか…？

該当のソースコード

<div class="img-wrap">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <img src="img4.jpg">
</div>

.img-wrap {
    width: 800px;
    position: relative;
}

.img-wrap img {
    width:100%;
    position: absolute;    
}

 $('.img-wrap img:nth-child(n+2)').hide();
      setInterval(function() {
        $(".img-wrap img:first-child").fadeOut(2000);
        $(".img-wrap img:nth-child(2)").fadeIn(2000);
        $(".img-wrap img:first-child").appendTo(".img-wrap");
      }, 4000);
});

試したこと

重なっている要素にmarginを指定して、調整してみたのですが、画面幅が１pxでも変わるとデザインがくずれてしまいます。

.img-wrap imgの position: absolute; を削除すると、他の要素に重ならなくなるのですが、画像が切り替わる瞬間に一瞬だけ画像が縦並びになってしまいます。

Answer 1

.img-wrap に高さの指定がないので、そうなると下の要素が画像の下に隠れてしまいます。
なので、.img-wrap に高さを指定して、.img-wrap img にも高さを指定してあげればまぁまぁうまくいくのではないでしょうか

表示させる画像の幅や高さがバラバラなのか、統一された固定幅なのかによっても、それらをどう表示させるかによって実装は変わってくるかと思います。

.img-wrap {
    width: 800px;
    height: 500px;
    position: relative;
    overflow: hidden;
}
.img-wrap img {
    width:auto;
    height: 500px;
    position: absolute;
}

Answer 2

marginを％で設定することで解決しました。