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