Javascript 为什么我调整浏览器大小时div重叠？

我正在尝试创建一个简单的登录表单，它看起来很好，直到我调整浏览器的大小。我在这里使用三个

元素<代码>中心，

中心2

和

中心3

。它们都封装在

main

中

bgpc

只是背景图片

一旦我调整了浏览器的大小，3个中间的div就会互相重叠，没有任何东西会停留在它的位置上

我已经尝试在包装器和三个中间div中将

position

设置为

absolute

或

relative

，但似乎没有任何效果

#bgpc{
浮动：底部；
身高：100%；
背景位置：绝对位置；
背景重复：无重复；
背景尺寸：封面；
z指数：-1；
滤镜：模糊（3px）亮度（50%）；
背景图像：url（“../images/background1.gif”）；
/*背景图像：url（“../images/home_alt.png”）*/
/*背景图像：url（'../images/backTest.PNG'）*/
}
#居中{
位置：绝对位置；
最高：45%；
左：50%；
转换：翻译（-50%，-50%）；
背景色：#35ada7；
填充物：5px；
左侧填充：50px；
右边填充：50px；
垫底：10px；
字号：180%；
滤镜：滴影（8px 8px 10px灰色）不透明度（75%）；
颜色：白色；
显示：块；
}
#中心2{
位置：绝对位置；
最高：80%；
左：50%；
转换：翻译（-50%，-50%）；
滤镜：滴影（8px 8px 10px灰色）不透明度（75%）；
显示：块；
}
#中心3{
位置：绝对位置；
最高：62%；
左：50%；
转换：翻译（-50%，-50%）；
滤镜：滴影（8px 8px 10px灰色）不透明度（75%）；
显示：块；
}
#主要{
浮动：底部；
}

MyCalc
学生用函数计算器
登录以使用
计算器

您应该像这样嵌套元素

  -- center
     --center-3
     --center-2

并移除中心2和3上的绝对定位，让父级处理定位

如果我要简化它之后，我只是内联的内容和删除中心-2和-3，并使用灵活的中心框

.center{
显示器：flex；
弯曲方向：立柱；
最大宽度：300px；
盒子阴影：9px 8px 10px 0px rgba（1581551581）；
填充：5px 0 10px；
弹性：1；
}
.栏目{
填充：0 16px；
}
.头衔{
背景色：#35ada7；
颜色：白色；
}
梅因先生{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
}

MyCalc
简易计算器

登录以使用
计算器

问题在于您的

位置：绝对
。使用该选项时，元素将从文档流中移除（例如，它们不再与页面上的其他元素交互）。所以它们总是重叠的。另外，
标记是一个不推荐使用的标记，不应使用。问题是您在顶部/左侧使用了
位置：绝对值
以及
%
值。如果要防止元素重叠，请将
位置：绝对
和
顶部
/
左
设置仅放在单个父元素上，然后使用边距/填充将三个div相互对齐。您的主要问题是位置：绝对存在通常难以管理，但值得一提的是，您可以使用以下选项针对特定的屏幕大小：）