制作角材料2（5.2.2版）FAB粘在右下角

Question

TL; DR

我正在努力使FAB固定在侧面菜单的右下角。当我有很多元素并且可以滚动时，它可以工作，但是当没有滚动时，它就不能工作。这是一个与之一起玩的闪电战的链接。请原谅一些杂乱无章的组织，我不得不撕掉一些东西，并对其格式进行一些更改。

问题与描述

我正在制作侧面菜单div，并希望在其上使用FAB像这样：

从文档中，我可以生成一些效果很好的菜单，并且在菜单上满是席子卡时，正是我想要的。这是它的外观的gif：

但是，当没有足够的卡片可以滚动并且添加按钮位于最后一张卡片的正下方时，就会出现问题：

我希望始终在侧边菜单的底部具有该添加按钮，但也要使其保持粘性并在可能滚动时保持在该位置。从我看到的内容来看，有一些方法可以轻松完成旧版本Angular的操作，但是我所看到的一切都没有表明最新版本的情况。

当前代码

main.html

<mat-drawer-container class="container">
  <mat-drawer mode="side" opened="true">
    <iaas-sideMenu></iaas-sideMenu>
  </mat-drawer>

  ... Content on other portion of screen ...

</mat-drawer-container>

sideMenu.html

<div>
  <div class="searchBar-div">
    <iaas-searchbar></iaas-searchbar>
  </div>
  <div>
    <iaas-sidecard *ngFor="let card of cards" [cardData]="card"></iaas-sidecard>
  </div>
  <div class="addButton-div">
    <iaas-addbutton></iaas-addbutton>
  </div>
</div>

sideMenu.css

.addButton-div {
  transform: translateX(195px); /* Bringing the button to the right */
  bottom: 5px; /* Ensure it's 5 px from the bottom */
  position: sticky; /* Sticks it in position when scrolling */
}

The button's component and folder's take care of its functionality and coloring as well as z-index, and I figured the best way to work this was to make the div the button is in essentially a sticky footer inside of the menu. However, I have not found much information on where I could be going wrong and have tried multiple things, but wanted to see if there was maybe something obvious I was doing wrong, or even just some general suggestions that could help since I am still a rookie with angular 2 and frontend in general (:

Edit

When using fixed or absolute for the position the button will just scroll with the cards with the current structure I have. gif for visualization:

Answer 1

如果您希望按钮永久固定在其位置，则应使用position: fixed;而不是position: sticky;

您可以在此处阅读有关定位的更多信息。

[编辑1]：上面的代码可以解决问题，但问题是，如果将按钮组件放在必须滚动的组件内，则按钮也会滚动。我只是从div内部删除了该按钮，并应用了上述CSS。请检查评论中共享的链接。