Css 我的潜水艇堆在一起

我在做一些CSS，我的div一直堆在彼此下面。我试着在他们身上使用position，但没用。我的工作如下。我在其中的图片将不会提供给您，因为它是从我的计算机，但我希望您能够了解我的问题是什么（sitelingo和Capture12是堆积在一起的）：

#logomain{
字体系列：museo无圆角，无衬线；
字体大小：33px；
颜色：白色；
字号：600；
填充顶部：13px；
左侧填充：470px；
}
#斯泰林戈{
字体系列：museo无圆角，无衬线；
字体大小：14px；
字体大小：粗体；
位置：相对位置；
颜色：白色；
左侧填充：232px；
填充顶部：24px；
}
#男爵{
位置：固定；
浮动：左；
宽度：50%；
高度：70像素；
背景色：#0A4076；
}
#巴托{
位置：固定；
浮动：对；
宽度：50%；
高度：70像素；
背景色：#0A4076；
}
#登录{
左侧填充：400px；
位置：绝对位置；
}
身体{
保证金：0；
}
.bold{
字体大小：粗体；
}

多邻国
多林戈
网站语言：英语

有几个问题：

您设置了一个位置：固定为#barone。这将相对于实际屏幕定位元素。

您将元素定位为绝对，当屏幕调整大小时，它将与其他元素重叠

在你的标志上设置了一个左边的填充物，这使它脱离了视角

也许你想要下面描述的东西

#logomain{
字体系列：museo无圆角，无衬线；
字体大小：33px；
颜色：白色；
字号：600；
填充顶部：13px；
/*左侧填充：470px*/
}
#斯泰林戈{
字体系列：museo无圆角，无衬线；
字体大小：14px；
字体大小：粗体；
位置：相对位置；
颜色：白色；
/*左侧填充：232px*/
填充顶部：24px；
}
#棒材容器{
背景色：#0A4076；
}
#男爵{
/*位置：固定*/
高度：70像素；
背景色：#0A4076；
显示：内联块；
}
#巴托{
位置：固定；
浮动：对；
高度：70像素；
背景色：#0A4076；
}
#巴托*{
显示：内联块；
}
#登录{
位置：相对位置；
/*左侧填充：400px；
位置：绝对位置*/
垂直对齐：中间对齐；
排名：0；
}
#登录img{
宽度：100px；
身高：100%；
}
身体{
保证金：0；
}
.bold{
字体大小：粗体；
}

多邻国
多林戈
网站语言：英语

您的最终结果需要是什么样的？CSS非常混乱，不清楚您希望它是什么样的。您需要提供一个描述或图像，说明您希望它看起来是什么样子。此外，共享Capture12.png图像或尺寸。只有当屏幕宽度低于某个宽度时，它们才会相互堆叠。也许你需要应用到你的网站或使用css框架（例如引导），Capture12只是一个不超过200px×100px的小图片。这是一个登录按钮屏幕截图