Bootstrap 页脚 Z 索引

Question

您好，在此先感谢您的帮助。 link 到相关网站：caulfield.co/test/

我正在尝试使用 Bootstrap 4 创建视差页脚显示效果。我似乎无法编辑 fixed-bottom footer 的 z-index 来隐藏它在正文 div 后面，这样它只有在滚动到 body 的底部后才会显示，其 margin-bottom 等于 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 类 fixed-bottom。

选择器 footer 不会覆盖它。

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

关于 body-temp 的情况。它有一个 position: static。这不适用于 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: ..."

希望这对您有所帮助:)

Answer 2

最快最简单的解决方案是简单地设置 .body-temp div 的位置，如下所示：

.body-temp {
    position: relative;
}

也就是说，我要做的是将整个 .body-temp div 包装在一个包装器中，并指定所述包装器的背景颜色 div:

HTML

<div class="body-wrapper">
    <div class="container body-temp"></div>
</div>
<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>© 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>

CSS

.body-wrapper {
    position: relative;
    z-index: 5000;
    background-color: #fff;
}

Bootstrap 页脚 Z 索引

Bootstrap Footer Z-Index

css

z-index

footer

twitter-bootstrap

bootstrap-4