(html/css)按钮不跟随网站的比例

Question

所以，嗯，我对StackOverflow和html/css都很陌生。

---

所以我的问题是：当访问网站时；Zeig mir mehr"没有根据浏览器的大小正确缩放。为了让你了解我的意思，这里有一些屏幕截图：这是第一个像素比率的情况(以及从定位来看应该是什么样子(

现在到断裂部分：不同的像素比例，按钮与文本/动画重叠

---

这是html代码：

<div class="container">
<span class="text1">Kevnkkm /Startseite </span>
<span class="text2">Willkommen!</span>
<h1>THIS PORTFOLIO WEBSITE WHICH IS USED FOR PERSONAL USAGE ONLY IS STILL HEAVILY UNDER CONSTRUCTION!</h1>
</div>
<section class="banner">
<div class="button" style="top: 500px">
<a href="#content" class="btn">Zeig mir mehr!</a>
</div>
</section>

这是样式表：

.button{
top: 58%;
left: 50%;
position: absolute;
width: 100%;

提前感谢！(也很抱歉我可能会造成xd(

Answer 1

之所以会发生这种情况，是因为您为按钮使用了设置的像素量。理想情况下，像这样的按钮应该在HTML中的文本之后，这样它就可以随着文本移动，而不是使用position: absolute。

您应该将按钮元素移动到红色h1之后的container元素中。然后，您可以将.button的CSS替换为margin-top: 32px