positionを利用した時のレイアウト崩れ　画像のフェードイン・アウト

html
1<div class="mainvisual">
2    <div class="fadein"> 
3        <img class="visual_1" id="targetImage" src="img\visual_1_pc.png">
4        <img class="visual_1" id="targetImage" src="img/visual_7_pc.png">
5        <img class="visual_1" id="targetImage" src="img\visual_6_pc.png">
6    </div>
7    <img class="logo1" src="img\logo.png">
8    <img class="logo2" src="img\visual_text_pc.png">
9    <img class="sp_logo" src= "img\visual_text_sp.png">
10</div>
11<div class="mainvisual_title">
12    <p>進化し続ける「街</p>
13</div>

css
1.fadein { position:relative; width:100%; height:332px; }
2.fadein img { position:absolute; left:10%; top:10%; }

js
1$(function(){
2  // Hide all images except the first within your "fade In" <div>
3  $('.fadein img:gt(0)').hide();
4  // Set an interval to occur every 3 seconds (3000ms)
5  setInterval(function(){
6    // Fade out the first element and fade in the next and then move the elements
7    $('.fadein :first-child').fadeOut()
8       .next('img').fadeIn()
9       .end().appendTo('.fadein');}, 
10    3000);
11    })

トップの画像をfadein/outを使って切り替えることはできたのですが、positionを使用しているため他のコンテンツと重なってしまいます。何か別の方法でそのままのレイアウトを崩さずにできる方法はありますか？
いろいろ検索したのですが、どれもpositionを使用していて同じ結果になってしまいました。
ご教授いただければ幸いです。