Html 按钮被垫式踏板元件切断

问题陈述

我的按钮被

mat-step

元素切断，或者看起来是这样

---

我尝试过的

• 我对

  mat step

  元素的填充和边距进行了处理，但它不起作用
• 我摆弄了摆设，但没用
• 我玩了

  z-index

  ，但没用

---

问题图片

---

图片说明

如您所见，next按钮被

mat step

元素切断，我确定问题出在

mat step

上。我通过将步进相机的背景设置为灰色来实现这一点，并发现它调整得很好。我将

mat步骤

设置为灰色，但没有显示任何内容，而且它也不会与任何CSS一起调整。

mat步骤显然有问题


我的代码

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>


下一个
返回
下一个
返回
下一个
返回
下一个
返回
下一个


预期结果

我希望按钮能正常工作，并被完全看到


实际结果

按钮被
垫步骤切断
错误是由于使用了相对位置（和顶部样式）。您需要绕过这些设置，或者最好将它们一起删除

闪电战：
谢谢您的回答，但这没有帮助。原因是我想向下和居中移动我的按钮，因为我将把内容放在步骤内（按钮挡住了它）。@Compilerv2我更新了stackblitz，以显示如何向步骤添加内容以及按钮如何相应调整。