在一个组件中修复 mat-fab 按钮

【问题标题】：To fix mat-fab button in one component在一个组件中修复 mat-fab 按钮
【发布时间】：2018-09-24 09:03:15
【问题描述】：

我创建了 3 个名为的组件。

login
forgot-pass
customer

我已将所有这些组件放在app.component.html 中，一个在另一个下方，使用相应的选择器，如下所示：

<app-login></app-login>
<app-forgot-pass></app-forgot-pass>
<app-customer></app-customer>

这里我在客户组件的右下角添加了一个按钮（mat-fab），如下图所示：

这是问题：当我们在滚动时到达客户 component 时应该显示 fab 按钮，但它对所有组件都是可见的，这意味着 fab 按钮溢出customer 组件如下图所示：

我认为这是一个 css 问题，我无法弄清楚。

这是stackblitz 链接。

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

尝试添加位置relative和absolute

这是一个例子

在customer.component.html

<div class="mainDiv">
  <div class="container">
    <div class="customer-search">
    <mat-form-field floatLabel=never >
            <input matInput id="search-com" type="text"  placeholder="search"  >
    </mat-form-field>
    </div>
    <div class="customer-list">
      <mat-selection-list #link>
          <mat-list-option *ngFor="let link of links">
              <a mat-list-item> <span class="customer-names">{{ link }}</span> </a>
          </mat-list-option>
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-selection-list>
        <button mat-fab color="primary" id="add-button" matTooltip="Add customer"><i class="material-icons" >group_add</i></button>
    </div>

  </div>
</div>

customer.component.css

.mainDiv{
  position: relative;
}
#add-button{

  right: 20px;
  bottom: 10px;
  left: auto;
  position: absolute;
}

这是更新后的Stackblitz

【讨论】：

感谢您的回答。