私のイメージがフッタに隠れているのはなぜですか？

Question

があります。

私はウェブサイトを構築しています。私は、本体のメインイメージをサイクル内の他のイメージにフェードインさせる「サイクラー」を追加しました。しかし、「サイクラー」を追加した後、画像はフッターを最下部に隠します。私はそれを修正する方法を知らない。 （私はこのサイトでjQueryを使用しています）。 "サイクラー"がフッターを最下部に隠さずに、画像を互いにフェードインさせるにはどうすればいいですか？

私はここに画像を添付しました：

そしてここでは、私のコードです：

function cycleImages(){ 
 
    var $active = $('#cycler .active'); 
 
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first'); 
 
    $next.css('z-index',2);//move the next image up the pile 
 
    $active.fadeOut(1500,function(){//fade out the top image 
 
    $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image 
 
    $next.css('z-index',3).addClass('active');//make the next image the top one 
 
    }); 
 
} 
 

 
$(document).ready(function(){ 
 
    // run every 7s 
 
    setInterval('cycleImages()', 5000); 
 
})

/*Resize the main image.*/ 
 
.content img { 
 
    width: 100%; 
 
    height: 600px; 
 
} 
 

 
#cycler { 
 
    position: relative; 
 
} 
 

 
#cycler img { 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
#cycler img.active { 
 
    z-index: 3; 
 
} 
 

 
/*Establish the padding for the introduction.*/ 
 
#introduction { 
 
    padding: 30px 150px 30px 150px; 
 
} 
 

 
/*Embolden and italicize the h3 in the intro.*/ 
 
#introduction h3 { 
 
    font-weight: bold; 
 
    font-style: italic; 
 
} 
 

 
/*Increase the font size for p in the intro.*/ 
 
#introduction p { 
 
    font-size: 20px; 
 
} 
 

 
/*Style the links in the intro.*/ 
 
#introduction a { 
 
    color: #F70736; 
 
    font-weight: bold; 
 
} 
 

 
/*Customize the hover action of links in the intro.*/ 
 
#introduction a:hover { 
 
    color: mediumpurple; 
 
    text-decoration: none; 
 
} 
 

 
/*Style the copyright in the footer.*/ 
 
.copyright {  
 
    width: 100%; 
 
    margin-top: 20px; 
 
    margin-bottom: 0; 
 
    text-align: center; 
 
    color: #F70736; 
 
    background-color: #F5F4EF; 
 
} 
 

 
/*Style the copyright.*/ 
 
.copyright p { 
 
    margin-top: 30px; 
 
    margin-bottom: 0; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    font-size: 16px; 
 
} 
 

 
/*Embolden the name in copyright.*/ 
 
#myName { 
 
    font-weight: bold; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div id="cycler"> 
 
    <img class="active" src="Images/1stPic.jpg" alt="Venus Fly Trap" /> 
 
    <img src="Images/2ndPic.jpg" alt="Croatia" /> 
 
    <img src="Images/3rdPic.jpg" alt="Ras" /> 
 
    <img src="Images/4thPic.jpg" alt="Portugal" /> 
 
    </div> 
 
    <div id="introduction"> 
 
    <h3>Headline.</h3> 
 
    <p>Lorem Ipsum bla bla bla 
 
    </p> 
 
    <p><a href="About.html">Learn more about my work</a> and write to me at <a href="mailto:#">@gmail.com</a>.</p> 
 
    </div> 
 
</div> 
 
<!--BEGIN FOOTER--> 
 
<footer> 
 
    <div class="copyright"> 
 
    <p>© <span id="myName"> Name Here</span> 2017</p> 
 
    </div> 
 
</footer> 
 
<!--END FOOTER-->

Answer 1

footer{ 
    display:flex; 
    position:relative; 
    z-index:999; 
    height:20vh; 
}