向右浮动时无法点击按钮

Question

我创建了一个使用添加和删除按钮动态添加输入的表单.我会把它们放在右边

我不能点击删除按钮来执行一个lastet

HTML文件:

    <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Constituez votre équipe</ng-template>
        <div formArrayName="pers" *ngFor="let control of secondFormGroup.controls.pers.controls; let i= index">
            <mat-form-field>
                <input matInput placeholder="Nom collaborateur #{{i+1}}" [formControl]="control.controls.name" required>
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Poste" [formControl]="control.controls.poste" required>
            </mat-form-field>
            <button *ngIf="secondFormGroup.controls.pers.controls.length > 1" (click)="deleteItem()" mat-mini-fab color="warn" class="rightButton"><mat-icon >remove</mat-icon>
                </button>
        </div>
        <div>{{secondFormGroup.value | json}}</div>


        <button (click)="addItem()" mat-mini-fab color="primary" class="rightButton"><mat-icon >add</mat-icon>
              </button>
    </form>
</mat-step>

CSS文件:

.rightButton {
    position: relative;
    float: right;
}

当我rightButton在删除按钮上禁用类时,我可以单击所有按钮而不会出现问题,但它们并不是我想要的正确位置.

Answer 1

试试这个

.rightButton {
    position: relative;
    z-index: 99;
    float: right;
}