Question

我的一个网站上有一个箭头，向用户表明他们可以继续向下滚动页面。我将此箭头的位置设置为固定，以便用户在滚动时继续看到它。但是，当你在页脚时，我希望它不会被看到。我已经尝试更改页脚的z-index，使其位于固定位置箭头上方，但这不起作用。如何制作以便在箭头上方看到页脚？

这是一个正在发生的事情的例子。 http://codepen.io/aahmed2/pen/dpjozP?editors=1100

#picture {
   background: url(http://blog.oxforddictionaries.com/wp-content/uploads/mountain-names.jpg) fixed bottom;
   background-size: cover;
   height: 900px;
}
#picture h1 {
   color: #fff;
   text-align: center;
   font-size: 130px;
   padding-top: 40px;
}
#down-arrow {
    position: fixed;
    z-index: 1;
    font-size: 25px;
    color: #ffffff;
    bottom: 10%;
    left: 1%;
}
.bounce {
  -webkit-animation: bounce 4s infinite;
  animation: bounce 4s infinite;
}

/* .bounce animation */
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
    40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
    60% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
    40% {
    transform: translateY(-20px);
  }
    60% {
    transform: translateY(-10px);
  }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
    40% {
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
    60% {
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
#main {
   padding-top: 80px;
   padding-bottom: 80px;
}
#footer {
   background-color: #333332;
   height: 300px;
   z-index: 2;
   text-align: center;
   padding: 20px;
   color: #ffffff;
}

<div id="picture">
       <div class="container">
          <h1>WELCOME<br>to the<br>ROCKIES</h1>
       </div>
    </div>
    <div id="down-arrow" class="bounce"><span class="glyphicon glyphicon-chevron-down"></span></div>
    <div id="main">
       <div class="container">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur sodales arcu, hendrerit fermentum nisi sagittis et. Aenean vel ex at purus feugiat facilisis. Pellentesque egestas, velit hendrerit porta pretium, mi sapien laoreet arcu, eu pretium libero ligula fermentum mauris. Etiam ac finibus lorem. Mauris sollicitudin, libero sit amet pulvinar placerat, nibh urna pharetra felis, vel suscipit tellus lectus sit amet augue. Phasellus sed porta tortor. Duis bibendum quam pretium, vehicula erat vitae, ullamcorper mauris. Donec a lacinia est. Proin vel tellus erat. Aenean ultrices sollicitudin sem sit amet dignissim. Vivamus et semper eros, at porttitor erat. Ut consequat nulla ac hendrerit rhoncus. Donec feugiat lobortis tellus at ultricies.</p>
       </div>
    </div>
    <div id="footer">
       <h2>FOOTER</h2>
    </div>

Answer 1

将position: relative;添加到页脚：

#footer {
   background-color: #333332;
   height: 300px;
   z-index: 2;
   text-align: center;
   padding: 20px;
   color: #ffffff;
   position: relative;
}

Answer 2

只需将位置添加到页脚。

  footer {
    position: relative;
    z-index: 5;
  }

使用z-index

2 个答案: