浮动动作按钮隐藏在页脚下。

Question

我正在设计一个页面，使用 angular-material 我想在屏幕右下角添加一个聊天按钮，这个按钮应该像这个网站一样，随着页面的滚动而滚动。http:/harleytherapy.com

我已经完成了大部分的工作，即按钮在右下角，并且当我开始滚动页面时，它也会随着页面滚动，但唯一的问题是，当我到达底部时，该按钮会在页脚后面，变得不可见。我希望当我到达底部时，它能保持在页脚上方。下面是我的代码。

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

先谢谢你。

Answer 1

为按钮提供z-index，使其位于页脚顶部。

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