Html 如何使我的盒子不接触页面底部？

我想知道一种方法，这样我的盒子就不会碰到页面底部。 我正在使用Bootstrap4，尝试了间隔实用程序，但似乎不起作用

这是一张现在的图片，它实际上在页面的底部

.signup {
  position:absolute;
  border:1px solid rgba(0,0,0,0.1);
  display:grid;
  place-content:center;
  padding:2em 2em;
  border-radius:6px;
}

---

您可以尝试这样使用translate：

.signup {
  transform: translateY(-10%)
}

我认为

位置：绝对
是问题所在

您可以访问了解更多有关居中的信息：这非常有帮助
 您可以像这样尝试使用translate：

.signup {
  transform: translateY(-10%)
}


我认为
位置：绝对
是问题所在

您可以访问了解更多有关居中的信息：这非常有帮助
 编辑您的代码，它的工作完美！我尝试了
transform:translateY（-2em）！感谢您提供此有用的链接和此解决方案！看起来很有效！编辑您的代码，它的工作完美！我尝试了
transform:translateY（-2em）！感谢您提供此有用的链接和此解决方案！看起来很有效！由于您使用的是bootstrap4，您可以添加适用于此特定情况的类
mb-5
或
mb-4
，也可以添加类
shadow
，以检查这是否真的远离底部。@tradecoder:谢谢您的回答，但不幸的是，间距实用程序似乎不适用于我的情况。正如Siddharth Shyniben所说，这可能是由我愚蠢地忘记的
位置：绝对
造成的。我必须将其移除，以使间距实用程序正常工作。我想我会的，但不是现在，他的解决方案似乎奏效了，所以我会接受的。好吧，我最终发现，你可能还需要对每一件事都进行这样的编码，无论你在哪里需要把东西从底部移开，在这种情况下，你可以在主容器或（主体）中添加一些底部填充，然后你就不必每次都这样做，因为你使用bootstrap4，您可以添加适用于此特定案例的类
mb-5
或
mb-4
，也可以添加类
shadow
，以检查这是否真的远离底部。@tradecoder:谢谢您的回答，但不幸的是，间距实用程序似乎不适用于我的案例。正如Siddharth Shyniben所说，这可能是由我愚蠢地忘记的
位置：绝对
造成的。我必须将其移除，以使间距实用程序正常工作。我想我会的，但不是现在，他的解决方案似乎奏效了，所以我会接受的。嗯，我最终发现，你可能还需要把每一件事都编码成这样，无论你在哪里需要把东西从底部移开，在这种情况下，你可以在主容器或（主体）上添加一些底部填充物一次，然后你永远不需要每次都这样做