Javascript 如何使用css移动底部的按钮？

我正在尝试移动底部的按钮（底部上方的一些像素）。所以无论按钮是小还是大，它总是在底部。我试过使用

flex-box

也无法做到这一点。容器的

min-height:500px

这是我的密码

预期输出：

浏览产品

在底部上方移动一些像素

.bottom__block {
    position: absolute;
    bottom: 20px;
    padding: 0 40px;
    /* display: flex;
    flex-direction: column; */
    border: 1px solid;
    min-height:500px;
}

HTML

---

如果你想在屏幕底部上方10%左右显示你的按钮，你可以使用页边距顶部：90%；在css中。下面是按钮旁边的完整代码：

<button style="margin-top: 90%;">hi</button>

hi

---

您可以根据按钮在屏幕上的距离编辑90%。由于代码也使用百分比而不是像素，因此它将根据您的屏幕大小进行调整。

用此替换CSS

   .rh02w2 {
      background-color: #325c72;
      height: calc(100vh - 60px);
      transform: translateY(60px);
      left: 0;
      min-width: 100%;
      position: absolute;
      margin-top: -60px;
      color: #fbf9f8;
    }

    .bottom__block {
      position: absolute;
      bottom: 20px;
      padding: 0 40px;
      /* display: flex;
        flex-direction: column; */
      border: 1px solid;
      min-height: 500px;
    }

    .rh02w4 {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }

    .obttns {
      width: 100%;
      font-size: 1.4rem;
    }

    .obttns > div > * {
      color: #161513 !important;
      background: #fff;
    }

    .obttns a {
      font-size: 1em;
      font-weight: 500;
      font-family: inherit;
      line-height: 1.2;
      padding: 10px;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      border: 0;
      min-height: 30px;
      height: 100%;
      text-align: center;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      -ms-flex-wrap: wrap;
      flex-flow: column wrap;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
    }

---

请在问题中包含有关堆栈溢出的所有相关代码。您可能可以使用堆栈片段（编辑器工具栏中的图标是

）。完成我的问题没有解释OP遗漏了哪些属性？只有100行CSS？

<button style="margin-top: 90%;">hi</button>

   .rh02w2 {
      background-color: #325c72;
      height: calc(100vh - 60px);
      transform: translateY(60px);
      left: 0;
      min-width: 100%;
      position: absolute;
      margin-top: -60px;
      color: #fbf9f8;
    }

    .bottom__block {
      position: absolute;
      bottom: 20px;
      padding: 0 40px;
      /* display: flex;
        flex-direction: column; */
      border: 1px solid;
      min-height: 500px;
    }

    .rh02w4 {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }

    .obttns {
      width: 100%;
      font-size: 1.4rem;
    }

    .obttns > div > * {
      color: #161513 !important;
      background: #fff;
    }

    .obttns a {
      font-size: 1em;
      font-weight: 500;
      font-family: inherit;
      line-height: 1.2;
      padding: 10px;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      border: 0;
      min-height: 30px;
      height: 100%;
      text-align: center;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      -ms-flex-wrap: wrap;
      flex-flow: column wrap;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
    }