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

上

实现CSS - FAB按钮出现在固定导航器的前面

1 个答案: