Can't click on button when float right - css

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)

Answer 2

For me z-index didnt work.
There was something in front of that button that is not visible. Making the button as a separate row helped.
In Bootstrap 4 this is how I made it a separate row:
<div class="row block-section">
<a data-placement="top" class="btn btn-sm btn-danger"
href="#" onclick="deleteClicked('video1');return false;">Delete </a>
</div>
Then it started working on mobile device even with
float: right