为什么我的图片隐藏了页脚？

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;
}