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

所以我试图将一个没有响应的html页面转换成一个有响应的页面 这是一个非常简单的页面，上面有一个图像，上面有一些文本，下面有一个电子邮件提交字段。 因此，每当我缩小页面时，电子邮件提交字段就开始上升页面。文本字段将调整大小（如从2行中的所有单词变为4-5行）。提交字段重叠在文本字段的顶部，因为它现在需要更多的空间（从2行到4-5行）。如何在CSS中进行调整，使提交字段始终位于文本字段下方

注意向下滚动查看结果。

#botText2{
位置：绝对位置；
z指数：5；
文本对齐：居中；
字体大小：20px；
利润率最高：107%；
左：6%；
右：6%；
颜色：rgba（4,45,72,1）；
}
.子域{
位置：绝对位置；
z指数：6；
浮动：左；
字体大小：20px；
利润率最高：122%；
左：38%；
右：6%；
}

大约2-3行文本

为

添加边距或填充。子字段

：

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

---

将边距或填充添加到

。子字段

：

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

---

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

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

您可以通过注释掉大部分位置来查看下面的内容，浏览器将提供所需的结果作为默认行为。因此，我的答案只是理解，在许多情况下，少肯定会多

#botText2{
/*z指数：5*/
文本对齐：居中；
字体大小：20px；
/*利润率最高：107%*/
/*左：6%*/
/*右：6%*/
颜色：rgba（4,45,72,1）；
}
.子域{
/*位置：绝对位置*/
/*z指数：6*/
/*浮动：左*/
字体大小：20px；
/*利润率最高：122%*/
/*左：38%*/
/*右：6%*/
}

大约2-3行文本

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

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

您可以通过注释掉大部分位置来查看下面的内容，浏览器将提供所需的结果作为默认行为。因此，我的答案只是理解，在许多情况下，少肯定会多

#botText2{
/*z指数：5*/
文本对齐：居中；
字体大小：20px；
/*利润率最高：107%*/
/*左：6%*/
/*右：6%*/
颜色：rgba（4,45,72,1）；
}
.子域{
/*位置：绝对位置*/
/*z指数：6*/
/*浮动：左*/
字体大小：20px；
/*利润率最高：122%*/
/*左：38%*/
/*右：6%*/
}

大约2-3行文本

您可以使用@media querys为不同的屏幕大小添加不同的样式。媒体查询仅在显示低于特定宽度或高度时才起作用，但一旦调整窗口大小，就会发生这种情况。我应该只针对屏幕大小，即当屏幕达到某个分辨率时，所有元素都要调整吗？您可以使用@media querys为不同的屏幕大小添加不同的样式。媒体查询仅在显示低于特定宽度或高度时才起作用，但一旦调整窗口大小，就会发生这种情况。我应该只针对屏幕大小，即当屏幕达到某个分辨率时，所有元素都要调整吗？