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

Question

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

Note向下滚动以查看结果。

#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*/
}

Answer 2

不要绝对定位元素，否则只能通过媒体查询实现响应。允许您的文档自然流动，只有在绝对必要时才中断此流。

这允许浏览器确定大小大小/位置以获得最佳结果。通过使用相对于固定值的百分比，可以允许更多的流动性，但取决于父值。

通过注释掉大部分的位置，您可以看到下面的浏览器作为默认行为给出了所需的结果。因此，我的答案只是明白，在许多情况下，更少当然会更多。

​

#botText2 {
  /* 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>

​