html - 在调整网站窗口大小时调整 html 中的元素

Question

所以我正在尝试将非响应式 html 页面转换为响应式 html 页面这是一个非常简单的页面，上面有一个图像和一些文本，下面是一个电子邮件提交字段。因此，每当我缩小页面时，电子邮件提交字段就会开始在页面上移动。文本字段调整大小(就像从 2 行中的所有单词变为 4-5 行)。提交字段重叠在文本字段的顶部，因为它现在需要更多空间(从 2 行到 4-5 行)。我如何在 CSS 中调整它，以便我的提交字段始终保持在文本字段下方

注意 向下滚动以查看结果。

#botText2 {
    position: absolute;
    z-index: 5;
    text-align: center;
    font-size: 20px;
    margin-top: 107%;
    padding-left: 6%;
    padding-right: 6%;
    color: rgba(4,45,72,1);
}

.subfield {
    position: absolute;
    z-index: 6;
    float: left;
    font-size: 20px;
    margin-top: 122%;
    padding-left: 38%;
    padding-right: 6%;

}

<span class="bot-text" id="botText2">some 2-3 lines of text</span>
<form class="subfield" action="/signup"  method="post">
  <input type="text" id="emailInput" name="email" placeholder="Enter Your Email here">
  <input type="submit" id="inputSubmit" value="Subscribe">
</form>

Answer 1

向 .subfield 添加边距或填充:

.subfield {
    padding-bottom: 20% /*for example*/
}