html - 在右下角制作 Angular Material 2(版本 5.2.2)FAB

Question

长话短说

我正在努力让一个 Angular FAB 贴在侧边菜单的右下角。当我有很多元素并且可以滚动时它会起作用，但在没有滚动时不起作用。这是一个link to a stackblitz to play with it .请原谅一些困惑，我不得不撕掉一些东西并以不同的方式格式化。

问题及描述

我正在制作侧边菜单 div，并希望在其上有一个 FAB，如下所示:

并且来自 docs当我的菜单上堆满了很多垫子卡片时，我能够生成一些效果很好并且完全符合我要求的东西。这是它的外观的 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 */
}

按钮的组件和文件夹负责其功能和着色以及 z-index，我认为最好的工作方式是使 div 按钮基本上位于菜单内的粘性页脚中。但是，我没有找到太多关于我可能出错的地方的信息，并且尝试了多种方法，但想看看是否有明显的地方我做错了，或者甚至只是一些可以提供帮助的一般性建议，因为我仍然是一个具有 Angular 2 和一般前端的菜鸟 (:

编辑

当使用 fixed 或 absolute 作为位置时，按钮将只与具有我当前结构的卡片一起滚动。用于可视化的 gif:

Answer 1

如果你想让你的按钮永久地粘在它的位置上，你应该使用 position: fixed; 而不是 position: sticky;

您可以阅读更多关于定位的信息 here .

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