title: Bootstrap Footer Z-Index
body: <p>Hello and thanks in advance for the help. Here's a link to the site in question: <a href="http://caulfield.co/test/" rel="nofollow noreferrer">caulfield.co/test/</a></p>
  
  <p>I'm attempting to create a parallax footer reveal effect using Bootstrap 4. I cannot seem to edit the <code>z-index</code> of the <code>fixed-bottom</code> <code>footer</code>to hide it behind the body <code>div</code> so that it reveals only after scrolling to the bottom of the <code>body</code> whose <code>margin-bottom</code> is equal the height of the <code>div</code>. For some reason, when trying to edit the <code>z-index</code>, nothing happens. I assume this is something in the CSS of Bootstrap causing this, but don't know where to start to look for it. Can anyone help? </p>
  
  <p>CSS:</p>
  
  <pre><code>.body-temp{
    height:1000px;
    margin-bottom:300px;
    background-color:black;
    z-index:5000;
  }
  
  
  /* Footer
  -------------------------------------------------- */
  
  footer{
    height:300px;
    background-color:#232323;
    margin: 0 auto;
    text-align:center;
    font-weight:300;
    font-size:.8rem;
    color:#666666;
    z-index: -1000;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container body-temp"&gt;
    &lt;/div&gt;
  
  
    &lt;!-- Footer
    –––––––––––––––––––––––––––––––––––––––––––––––––– --&gt;
        &lt;footer class="container-fluid fixed-bottom"&gt;
          &lt;a class="" href="#"&gt;
            &lt;img class="grow" id="footer-logo" src="images/mb-white.svg" alt="Margaret Biggs Fine Art"&gt;
          &lt;/a&gt;
          &lt;p&gt;&amp;copy; 2018 Margaret Biggs&lt;/p&gt;
          &lt;div&gt;
            &lt;a class="footer-icons" href="#"&gt;
                &lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;
            &lt;/a&gt;
            &lt;a  class="footer-icons" href="#"&gt;
                &lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
  </code></pre>