我已经创建了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-button,但是对于所有组件而言,它都是可见的,这意味着fab-button溢出了customer
组件的位置,如下图所示:
我认为这是一个CSS问题,我无法弄清楚。
这是stackblitz链接。
答案 0 :(得分:2)
尝试添加排名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