html - 页脚未显示，因为图像位置设置为相对

Question

这是我的小提琴

如果我删除下面的 css，一切都很好。没有它，页脚会占据整个页面，屏蔽所有内容。

.image {
    position:relative;
    float: left;
}
.image .text {
    position:absolute;
    top:110px;
    left:55px;
    width: 200px;
    color: white;
    font-size: 14px;
}

问题是没有该代码我无法让我的覆盖文本显示在我的图像上。我究竟做错了什么？谢谢。

Answer 1

添加clear:both到#footer;

#footer {
    margin: 0px auto;
    padding-bottom: 60px;
    width: 850px;
    background: #444;
    position: relative;
    text-align: center;
    clear:both;
}

Answer 2

尝试clear: both页脚。

#footer {
    margin: 0px auto;
    padding-bottom: 60px;
    width: 850px;
    background: #444;
    position: relative;
    text-align: center;
    clear: both;
}