Bootstrap Footer Z-Index

Question

Hello and thanks in advance for the help. Here's a link to the site in question: caulfield.co/test/

I'm attempting to create a parallax footer reveal effect using Bootstrap 4. I cannot seem to edit the z-index of the fixed-bottom footerto hide it behind the body div so that it reveals only after scrolling to the bottom of the body whose margin-bottom is equal the height of the div. For some reason, when trying to edit the z-index, 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?

CSS:

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

HTML:

<div class="container body-temp">
  </div>


  <!-- Footer
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
      <footer class="container-fluid fixed-bottom">
        <a class="" href="#">
          <img class="grow" id="footer-logo" src="images/mb-white.svg" alt="Margaret Biggs Fine Art">
        </a>
        <p>&copy; 2018 Margaret Biggs</p>
        <div>
          <a class="footer-icons" href="#">
              <i class="fab fa-linkedin-in"></i>
          </a>
          <a  class="footer-icons" href="#">
              <i class="fab fa-facebook-f"></i>
          </a>
        </div>
      </footer>

Answer 1

Yes this is bootstrap overriding you css via the css specificity.

You added the BS clss fixed-bottom that has a z-index of 1030.

the selector footer wil not overide it.

Use footer.fixed-bottom to overide BS via specificity.

On the case of body-temp. It has a position: static. This wont work with z-index. To solve this add position: relative on your body-temp styles.

MDN DOCS for z-index

"For a positioned box (that is, one with any position other than static), the z-index property specifies: ..."

Hope this helps :)