如何使CSS动画在页脚下呈现？

Question

I currently have a footer on my website which is created with the following HTML:

<footer>
      <div class="container">
          <div style="float: left;"> www.redbarongames.co.uk </div>
          <div style="float: right;"> <i class="fa fa-copyright" aria-hidden="true"></i> 2016-2017 Redbaron Games. Designed by Conor Watson </div>
      </div>
 </footer>

And the following CSS:

footer {
    width: 100%;
    height: 100px;
    background-color: #efefef;
    font-family: 'BebasNeue', sans-serif;
    color: #606060;
    padding-top: 45px;
    -webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
}

I also have a large div which is at the bottom of my page, right above the footer. I wanted this div to fade in from underneath the footer, so I tried using the Animate.CSS 'fadeInUp' animation, however the animation plays over the top of the footer (like so: https://gyazo.com/00c16528ee1a797284cb595235dc2d56 ). How can I make the animation play below the footer?

Answer 1

Try to add a z-index to your <footer> - z-index: 9999

footer {
    z-index: 9999;
    width: 100%;
    height: 100px;
    background-color: #efefef;
    font-family: 'BebasNeue', sans-serif;
    color: #606060;
    padding-top: 45px;
    -webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
}