Can't click on button when float right

Question

I have created a form that adds input dynamically with an add and remove button. I would place them on the right

I can't click on remove button exept the lastet one

HTML file:

    <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 file :

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

When I disable rightButton class on the remove button , I could click on all of the buttons without a problem but they are not right positioned as I want.

Answer 1

Try this

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

This will make the button to be on top of all the HTML elements on the form. The z-index property only works on positioned elements (absolute, relative, fixed, and sticky)