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

Question

我目前在我的网站上有一个页脚，它是使用以下 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>

以及以下 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);
}

我还有一个大的 div，它位于页面底部，就在页脚上方。我希望这个 div 从页脚下方淡入，所以我尝试使用 Animate.CSS 'fadeInUp' 动画，但是动画在页脚上方播放(如下所示:https://gyazo.com/00c16528ee1a797284cb595235dc2d56)。如何让动画在页脚下方播放？

Answer 1

尝试添加一个z-index给你的<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);
}