Question

您好，在此先感谢您的帮助。以下是指向相关网站的链接：caulfield.co/test/

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

CSS：

div

HTML：

z-index

Answer 1

是的，这是Bootstrap通过CSS特异性覆盖您的CSS。

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

选择器footer不会覆盖它。

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

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

MDN DOCS for z-index

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

希望这会有所帮助：）

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索引

2 个答案: