css - Materialize CSS - FAB 按钮出现在固定导航的前面

Question

我有这个固定的导航栏:

<div class="navbar-fixed">
    <nav class="blue-grey lighten-2">
        <div class="container">
            <div class="navbar-wrapper">
                <a href="#" class="brand-logo"><img src="~/img/nav_logo.png" alt="..." /></a>
                <a href="#" data-activates="mobile-nav" class="button-collapse">
                    <i class="material-icons">menu</i>
                </a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<ul class="side-nav blue-grey lighten-2" id="mobile-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

这个 FAB 按钮:

<div class="btn-floating-container">
    <div class="fixed-action-btn horizontal btn-floating-div">
        <a class="btn-floating btn-large blue-grey">
            <i class="large material-icons">file_download</i>
        </a>
        <ul>
            <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
            <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
            <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
            <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
        </ul>
    </div>
</div>

还有这个 CSS(让 FAB 按钮进入我想要的部分，而不是在右下角):

.btn-floating-container {
    position: relative;
    height: 70px;
}

.btn-floating-div {
    position: absolute;
    display: inline-block;
    right: 30%;
}

这很好用!除了当我向下滚动和导航时，应该“越过”按钮，最终在它们“后面”。这给我留下了一个阻止我单击导航链接的按钮。我怎样才能让这个 FAB 按钮保持在导航“后面”？我尝试更改 z-index 但它没有用...

Answer 1

这个答案可能来得太晚了，但我在下面尝试了它，它解决了你的错误。

.btn-floating-container {
    position: relative;
    height: 70px;
    z-index: 99;
}

z-index 应该在 btn-floating-container 上