图片和按钮按百分比放置，但在我调整 window 大小时被裁剪

Question

我正在尝试让我的应用程序响应。为此，我做的第一件事是使用百分比而不是像素来放置按钮和徽标。

问题是，当我将 window 调整为较小的尺寸时，按钮和徽标会移动，但它们的侧面也会像这样被裁剪：

调整大小前按钮的外观如下：

下面是缩小后的样子：

如何让它移动但仍完整显示？

这是我的 CSS 这个按钮：

#next-step{
    position: absolute;
    top: 90%;
    left:88%
}

Answer 1

更改CSS如下：

#next-step{
    position: absolute;
    bottom: 1em;
    right: 1em;
}

通过使用 bottom 和 right 而不是 top 和 left，参考将是容器的右下角。这样你的按钮将永远不会裁剪。您可以随意调整按钮的位置。

Answer 2

将位置值更改为底部和右侧可能会对您有所帮助。您可以尝试此 CSS 代码，并根据您的喜好调整百分比值：

#next-step{
    position: absolute;
    bottom: 10%;
    right: 12%;
}

Answer 3

这取决于您定位元素的方式。

#next-step{
    position: absolute;
    top: 90%;
    left:88%
}

是按左上角定位按钮。

如果您改用：

#next-step{
    position: absolute;
    bottom: 10%;
    right:12%
}

它会将位置设置为屏幕上类似的位置，但基于右下角（您需要微调数字）。

但是，需要注意一件事：使用百分比时，一旦低于特定屏幕尺寸，它就会变得混乱，因此媒体查询也值得一看。

Image and button placed by percentage but are cropped when I resize the window