CODEWITHSUNDEEP
htmlcssangularangular-material
sallu-tech
sallu-tech

Reputation: 77

Floating action button hides behing the footer

I am designing a page using angular-material and I want to add a chat button at the bottom right corner of the screen and this button should scroll as I scroll down the page just like this website: http://harleytherapy.com/

I have done most of the part i.e. button is there at the bottom right corner and it also scrolls with the page as I start scrolling the page but the only problem is that when I reach the bottom, that button goes behind the footer and become invisible. I want it to stay above the footer when I reach the bottom. Here is my code:

<div class="main-content-container">

    <button mat-fab class="chat-icon-btn">
        <mat-icon class="chat-icon">chat_bubble_outline</mat-icon>
    </button>

    <h1>Dashboard&nbsp;<mat-icon aria-label="false">dashboard</mat-icon>
    </h1>
    <!-- Some more content -->


    <footer class="footer">
        <span>
          <a href="#" class="footer-links">Hjem</a><span class="vertical-divider"></span>
          <a href="#" class="footer-links">Om </a> <span class="vertical-divider"></span>
          <a href="#" class="footer-links"> Hjælp </a> <span class="vertical-divider"></span>
          <a href="#" class="footer-links"> Kontakt os </a> <span class="vertical-divider"></span>
          <a href="#" class="footer-links"> Webstedsbetingelser </a> <span class="vertical-divider"></span>
          <a href="#" class="footer-links"> Fortrolighedspolitik</a>
        </span>
      </footer>

</div>

CSS:

.main-content-container {
    margin-left: 10%;
}

.chat-icon-btn {
    position: fixed;
    right: 0;
    bottom: 0;
    background: #3900B3;
    color: #fff;
    font-size: 25px;
    margin-right: 25px;
    margin-bottom: 5px;
}

.chat-icon {
    margin-right: 0px !important;
}

.footer {
    background-color: #3900B3;
    padding: 50px 0 50px 0;
    position: relative;
    text-align: center;
    margin-top: 100px;
}

.footer-links {
    color: #fff;
    text-decoration: navajowhite;
    font-size: 18px;
}

Thanks in advance.

Upvotes: 0

Views: 1801

Answers (1)

Jasdeep Singh
Jasdeep Singh

Reputation: 8301

Provide z-index to button so that it comes at top of footer.

.chat-icon-btn {
  z-index: 999;
}

Upvotes: 2

Related Questions