向右浮动时无法点击按钮答案

【问题标题】：Can't click on button when float right向右浮动时无法点击按钮
【发布时间】：2018-05-07 07:19:29
【问题描述】：

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

我不能点击删除按钮，除了最后一个

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 类时，我可以毫无问题地单击所有按钮，但它们的位置不正确。

【问题讨论】：

您应该将其命名为 position : absolute 或 fixed。
尝试添加 z-index:9999;
使用z-index属性。
另外，尝试为每组清除浮动。你可以在伪元素之后使用它
当您使用 float right 时，您只需显示它们没有必要位于正确的 z-index 中，因此您可以使用 z-index css 来更正或使用其他定位属性，例如 display flex justify content结束。

标签： css angular

【解决方案1】：

试试这个

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

这将使按钮位于表单上所有 HTML 元素的顶部。 z-index 属性仅适用于定位元素（绝对、相对、固定和粘性）

【讨论】：

是的。它只影响定位元素（相对和绝对）。
@Tibs 你能解释一下这背后的逻辑吗？
嗨，@SantiagoM.Quintero 很抱歉回复得太晚了。我编辑了我的帖子并添加了解释。谢谢

【解决方案2】：

对我来说，z-index 不起作用。

该按钮前面有一些不可见的东西。将按钮设置为单独的行会有所帮助。

在 Bootstrap 4 中，这就是我将其设为单独行的方式：

<div class="row block-section">
   <a data-placement="top" class="btn btn-sm btn-danger"
     href="#" onclick="deleteClicked('video1');return false;">Delete </a>
</div>

然后它甚至开始在移动设备上工作

浮动：右

【讨论】：