使用 z-index 将位置固定元素移动到某物后面

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