Move position fixed element behind something by using z-index

Question

I have an arrow on one of my websites indicating to users that they can keep scrolling down on the page. I set the position of this arrow to fixed so users keep seeing it as they scroll. However, I want it to not be seen when you are at the footer. I've tried changing the z-index of the footer so that it would be positioned above the fixed position arrow, but that didn't work. How do I make it so that the footer will be seen above the arrow?

Here is an example of what is going on.. 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

add position: relative; to the footer:

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

Answer 2

Just give position to your footer.

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