Закрепить мат-фаб в одном компоненте

Question

Я создал 3 компонента.

1. login

2. forgot-pass

3. customer

Я поместил все эти компоненты в app.component.html, один под другим, используя соответствующие селекторы вот так:

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

Здесь ядобавили кнопку (mat-fab) в правом нижнем углу клиентского компонента, как показано на рисунке ниже:

Вот проблема: Кнопка fab должна отображаться, когда мы достигаем клиента component при прокрутке, но она видна для всех компонентов, означающих, что кнопка fab переполняется из customerкомпонент, как показано на изображении ниже:

Я думаю, что это проблема CSS, я не могу ее выяснить.

Вот ссылка stackblitz .

Answer 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