Html 避免跳水队员相互重叠

我想做一个投资组合页面。我创建了一个内部嵌套有div的部分。该部分顶部的前两个被设置为相对，它们可以工作。我试着将其余的设置为相对，它们显示在前两个div的顶部。救命啊

#公文包{
宽度：650px；
背景色：白色；
左边距：75px；
边缘顶部：120px；
右边距：40px；
边缘底部：200px；
填充：15px；
浮动：左；
边框：1px实心#dddddd；
溢出：自动；
明确：两者皆有；
}
#博客{
位置：相对位置；
浮动：左；
宽度：40%；
}
#博客img{
浮动：左；
宽度：100%；
右边距：10px；
位置：绝对位置；
}
#博客p{
保证金：0；
位置：绝对位置；
顶部：125px；
颜色：白色；
背景色：#41AAA5；
宽度：100%；
填充顶部：7px；
垫底：7px；
文本对齐：居中；
字体大小：20px；
}
#刽子手{
位置：相对位置；
浮动：对；
宽度：40%；
}
#刽子手{
浮动：左；
宽度：100%；
位置：绝对位置；
}
#刽子手p{
保证金：0；
位置：绝对位置；
顶部：125px；
颜色：白色；
背景色：#41AAA5；
宽度：100%；
填充顶部：7px；
垫底：7px；
文本对齐：居中；
字体大小：20px；
}
#播放列表{
位置：相对位置；
浮动：左；
宽度：40%；
}
#播放列表{
}
#播放列表p{
}

博客

刽子手游戏

播放列表

地图页

宠物

在博客和刽子手的img标签上的
位置：绝对
导致了这个问题。位置：绝对元素不选择高度，所以所有元素都重叠

以下是您的更新代码：


#公文包{
宽度：650px；
背景色：白色；
左边距：75px；
边缘顶部：120px；
右边距：40px；
边缘底部：200px；
填充：15px；
浮动：左；
边框：1px实心#dddddd；
溢出：自动；
明确：两者皆有；
}
#博客{
位置：相对位置；
浮动：左；
宽度：40%；
}
#博客img{
浮动：左；
宽度：100%；
右边距：10px；
}
#博客p{
保证金：0；
位置：绝对位置；
顶部：125px；
颜色：白色；
背景色：#41AAA5；
宽度：100%；
填充顶部：7px；
垫底：7px；
文本对齐：居中；
字体大小：20px；
}
#刽子手{
位置：相对位置；
浮动：对；
宽度：40%；
}
#刽子手{
浮动：左；
宽度：100%；
}
#刽子手p{
保证金：0；
位置：绝对位置；
顶部：125px；
颜色：白色；
背景色：#41AAA5；
宽度：100%；
填充顶部：7px；
垫底：7px；
文本对齐：居中；
字体大小：20px；
}
#播放列表{
位置：相对位置；
浮动：左；
宽度：40%；
}
#播放列表img{}
#播放列表p{}

博客

刽子手游戏

播放列表

地图页

宠物

你的问题是
位置：绝对
–最好读一下@Louis你想如何显示？