Html 调整浏览器大小时，如何防止UI元素相互重叠？

上周我学习了如何通过HTML设计UI。我基本上认为我的网站布局一切都很完美，并准备演示。但我不小心调整了我的web浏览器的大小，并观察到所有元素都相互重叠（即使在其他机器中也有相同的行为）

我用谷歌搜索了这个问题，但没有一个是有用的。基本上，我不知道在哪里修改代码。请让我知道如何解决这个问题

这是标题
身体{
背景色：#FDF5E6；
背景图像：url（“file:///C:/Users/myuser/Pictures/HTML/bicycles.jpg");
背景重复：无重复；
背景尺寸：封面；
}
这是网站标题
“这是标题”
登录
用户名：


密码：


没有帐户吗
此处

函数弹出窗口（mylink，windowname）{
如果（！window.focus）
返回true；
var href；
if（typeof（mylink）=‘string’）
href=mylink；
其他的
href=mylink.href；
打开（href，windowname，'width=400，height=200，scrollbars=yes'）；
返回false；
} 

您使用的是

位置：绝对这就是重新调整视图端口大小时元素重叠的原因。这种布局不应使用此属性。相反，您应该使用类似于
float:left。我建议您深入研究网站布局、网格模型和引导


float：左使div与左侧对齐

float：右-将div向右对齐

和
位置：绝对使它们像气球一样漂浮，并让您选择它的位置。
您使用的是
位置：绝对这就是重新调整视图端口大小时元素重叠的原因。这种布局不应使用此属性。相反，您应该使用类似于
float:left。我建议您深入研究网站布局、网格模型和引导


float：左使div与左侧对齐

float：右-将div向右对齐

和
位置：绝对使它们像气球一样漂浮，并让您选择它的位置。
我为您创建了一个简单的解决方案。我没有太多的风格，但你应该能够做到这一点自己


/**
*JS/jQuery
*/
$（'#btn login'）。在（'click'，function（）上{
警报（'Do login'）；
});
$（'#btn cancel'）。在（'click'，function（）上{
$（'.login form'）[0].reset（）；
});
/**
*CSS
*/
.登录框{
显示：块；
背景：#fff；
边框：1px实心#ddd；
填充：20px 10px；
}
.登录框a{
显示：块；
文本对齐：右对齐
}
.登录表单输入，
.login form.btn{
边界半径：0px；
}
.按钮容器{
利润率：10px0；
}

网站标题
“这是标题”
登录
用户名
密码
取消
登录
我为您创建了一个简单的解决方案。我没有太多的风格，但你应该能够做到这一点自己


/**
*JS/jQuery
*/
$（'#btn login'）。在（'click'，function（）上{
警报（'Do login'）；
});
$（'#btn cancel'）。在（'click'，function（）上{
$（'.login form'）[0].reset（）；
});
/**
*CSS
*/
.登录框{
显示：块；
背景：#fff；
边框：1px实心#ddd；
填充：20px 10px；
}
.登录框a{
显示：块；
文本对齐：右对齐
}
.登录表单输入，
.login form.btn{
边界半径：0px；
}
.按钮容器{
利润率：10px0；
}

网站标题
“这是标题”
登录
用户名
密码
取消
登录
出现这种情况是因为“位置：绝对”请使用响应性媒体查询-我认为Rahul在使用媒体之前还有很长的路要走queries@Timo：如果我删除了“Position:absolute”，那么所有元素都会左对齐，UI会扭曲。它们会因为Position:absolute而重叠。用户界面被扭曲是因为它的结构不好，这是因为“位置：绝对”请使用响应媒体查询-我认为Rahul在使用媒体之前还有很长的路要走queries@Timo：如果我删除了“Position:absolute”，那么所有元素都会左对齐，UI会扭曲。它们会因为Position:absolute而重叠。UI被扭曲了，因为它没有很好的结构。谢谢Aivaras的回复。你能告诉我我是如何准确地出现在屏幕中央的吗；然后把你的其他潜水艇放进去。我举了一个例子，如果我帮了你，别忘了把我的回答作为你问题的答案：）谢谢。我结合了你的例子和Timo给出的代码。虽然我能够使元素显示在所需的位置，但如果调整浏览器的大小，它们会重叠。我没有太多时间来编写完全响应的答案。但诀窍是在宽度、高度、边距等方面使用百分比值，因此当