css - Bootstrap 页脚 Z 索引

Question

您好，提前感谢您的帮助。以下是相关网站的链接:caulfield.co/test/

我正在尝试使用 Bootstrap 4 创建视差页脚显示效果。我似乎无法编辑 fixed-bottom footer 的 z-index 将其隐藏在正文 div 后面，以便仅在滚动到其 margin-bottom 为的 body 底部后才显示等于 div 的高度。由于某种原因，当尝试编辑 z-index 时，没有任何反应。我认为这是 Bootstrap 的 CSS 中的某些内容导致的，但不知道从哪里开始寻找它。有人可以帮忙吗？

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

是的，这是 Bootstrap 通过 css 特异性覆盖你的 css。

您添加了 z-index 为 1030 的 BS clss fixed-bottom。

选择器页脚不会覆盖它。

使用 footer.fixed-bottom 通过特异性来覆盖 BS。

以body-temp为例。它有一个位置:静态。这不适用于 z-index。要解决此问题，请在 body-temp 样式中添加 position:relative。

MDN DOCS for z-index

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

希望这有帮助:)