Search code examples
csshtmlwebmaterialize

Materialize CSS - FAB buttons appear in front of fixed nav

I have this fixed navbar:

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

This FAB buttons:

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

And this CSS (to make the FAB buttons go in the part that I want and not in the right-down corner):

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

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

This works great! Except when I scroll down and the nav, that is supose to go "over" the buttons, ends up "behind" them. This leaves me withe a button that blocks me for clicking the nav links. How can I do to keep this FAB buttons "behind" the nav? I tried changing the z-index but it didn't work...

Solution

  • This answer may have come almost very late, but I tried it my way below and it solve your error.

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

    z-index should be on btn-floating-container