按钮被 mat-step 元素截断

Question

问题陈述

我的按钮似乎被 mat-step 元素切断了。

我试过的

我尝试了 mat-step 元素的填充和边距，但它不起作用。
我试过定位，但没用。
我玩过 z-index 但没用。

问题图片

图片说明

如您所见，下一个按钮被 mat-step 元素截断，我确定问题出在 mat-step。我通过将步进器的背景设为灰色来做到这一点，发现它调整得很好。我将 mat-step 设为灰色，但没有显示任何内容，而且它不会随任何 CSS 调整。 mat-step.

显然有问题

我的代码

CSS

.stepper {
  position: relative;
  top: 50px;
}

.stepBtns {
  position: relative;
  font-size: 20pt;
  padding: 10px 30px;
  box-sizing: border-box;
  border: 1px solid #000000;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  text-align: center;
  top: 50px;
}

HTML

<mat-horizontal-stepper class="stepper">
    <!-- Step 1 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

    <!-- Step 2 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperPrevious>Back</button>
      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

    <!-- Step 3 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperPrevious>Back</button>
      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

    <!-- Step 4 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperPrevious>Back</button>
      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

    <!-- Step 5 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperPrevious>Back</button>
      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

  </mat-horizontal-stepper>

预期结果

我想让按钮正常工作并被完整地看到。

实际结果

按钮被 mat-step 切断。

Answer 1

错误是由于使用了相对位置（和顶部样式）。您需要解决这些设置，或者最好将它们全部删除。

堆栈闪电战： https://stackblitz.com/edit/angular-mat-stepper-program-jgsasc

按钮被 mat-step 元素截断

Button being cut off by mat-step element

html

css

styling

angular-material

angular