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 {
    margin: 0px auto;
    padding-bottom: 60px;
    width: 850px;
    background: #444;
    position: relative;
    text-align: center;
    clear: both;
}

Answer 2

clear:bothに追加#footer;

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