引导页脚 Z 索引

Posted 2023-03-21

【中文标题】引导页脚 Z 索引

【英文标题】：Bootstrap Footer Z-Index

【发布时间】：2019-04-06 05:12:55

【问题描述】：

您好，提前感谢您的帮助。这是相关网站的链接：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" >
        </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>

【参考方案1】：

是的，这是引导程序通过 css 特异性覆盖你的 css。

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

选择器 footer 不会覆盖它。

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

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

MDN DOCS for z-index

"对于定位框（即具有除静态以外的任何位置的框），z-index 属性指定：..."

希望这会有所帮助:)

【讨论】：

谢谢，我是这么认为的。为什么编辑body-temp 的z-index 不起作用，你知道吗？

非常好，是的，这两个问题都需要改变。感谢您抽出宝贵的时间！很好的答案。

太棒了。伙伴代码！

【参考方案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" >
    </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;