Html 放置div容器

.containerBigOverview{
显示：块；
位置：绝对位置；
利润率：3%；
填充底部：0；
背景色：红色；
}
.集装箱概览{
位置：相对位置；
宽度：31%；
利润率：1%；
浮动：左；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.集装箱概览{
位置：相对位置；
宽度：100%；
宽度：100%；
利润率：3%；
浮动：无；
}
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：0；
左：0；
右：0；
背景色：rgb（176224230,0.9）；
溢出：隐藏；
宽度：100%；
身高：0；
过渡：放松；
}
.containerOverview:悬停。覆盖{
身高：50%；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
/*页脚*/
.页脚{
位置：绝对位置；
宽度：100%；
背景色：#aaa；
颜色：白色；
填充：2%；
}
.页脚a{
文字装饰：无；
颜色：白色；
填充：1%；
}

将鼠标悬停在图像上以查看效果

你好，世界 你好，世界2 你好，世界3

---

如果您从页脚中删除了

位置：相对

，则默认情况下，该位置变为

位置：静态

，这就是您在本例中可能看到的叠加效果

根据您想要实现的目标，您可以使用不同的方法

通常，对于页脚，您可以使用：

.footer {
  position: fixed;
  bottom: 0;
}

以便将其附加到页面底部

---

完整的工作示例：

正文{
最小高度：20雷姆；
}
.containerBigOverview{
显示器：flex；
职位：亲属；
证明内容：中心；
利润率：3%；
填充底部：0；
背景色：红色；
}
.集装箱概览{
位置：相对位置；
显示器：flex；
对正内容：空间均匀；
宽度：31%；
利润率：1%；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.集装箱概览{
位置：相对位置；
宽度：100%；
宽度：100%；
利润率：3%；
浮动：无；
}
}
.svg{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：0；
左：0；
右：0；
背景色：rgb（176224230,0.9）；
溢出：隐藏；
宽度：100%；
身高：0；
过渡：放松；
}
.containerOverview:悬停。覆盖{
身高：50%；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
/*页脚*/
.页脚{
位置：固定；
底部：0；
宽度：100%；
背景色：#aaa；
颜色：白色；
填充：2%；
}
.页脚a{
文字装饰：无；
颜色：白色；
填充：1%；
}

你好，世界
你好，世界2
你好，世界3

我找到的最简单的解决方案是使用

display:flex

将所有容器转换为FlexBox。FlexBox比块显示清晰得多-试试看。 另外，HTML

中有一个特殊的页脚标记，所以您不需要创建新类。

---

下面是固定代码：

请创建一个代码笔。此外，页脚位于图像顶部，因为它具有

位置：绝对
。由于HTML中的
页脚
位于
ContainerBiogoverview
之后，因此它位于页脚之上。很抱歉，我是新手-不知道codepen:-不幸的是，我不知道如何包含图像，因此效果不好。如果我删除position:absolute，则containerBigOverview位于页脚内。谢谢！那有帮助！很好的努力。不幸的是，悬停动画似乎无法正常工作。是的，我后来也意识到了：/能否请某人再次解释一下，为什么我的div class=“containerBigOverlay”成为页脚的一部分？我有点为那件事发疯了。。谢谢你的回答！