フッタはページの下にはなく背景の画像の下にあります

私はウェブの下にフッタを配置したいのですが、背景の画像の下に貼り付いています。私はたくさんのトリックを試していましたが、ウェブサイトの下部にあるすべてのコンテンツの下に配置することはできません（私はそれを修正したくありませんが、すべてのコンテンツの下に表示したい、完全に）。フッタはページの下にはなく背景の画像の下にあります

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="style.css" type="text/css" rel="stylesheet"/> 
    </head> 
    <body> 
     <div class="background"> 
     </div> 
     <div class="text"> 
      <h1>xxxxxx<h1> 
      <h2>xxxxxxxxxxxxxx<h2> 
     </div> 
     <footer class="footer">Footer text</footer> 
    </body> 
</html>

CSS：

私が使用していたコードの下に見つけてください、私は別のトピックですべての答えをチェックして

body, html { 
    position: relative; 
    height: 100%; 
} 

.background { 
    background-image: url("xxx.jpg"); 
    height: 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
} 

.text { 
    margin: auto; 
    text-align: center; 
    width: 70%; 
} 

.footer { 
    position: absolute; 
    left:0; 
    bottom:0; 
    height:50px; 
    width:100%; 
    background:#999; 
}

が、まだ私の問題の解決策を見つけることができません。ご協力いただきありがとうございます。

挨拶、マット

出典

2017-08-14 mat1984

変更スティッキーフッターを削除するには、このようにCSSクラスのフッター：

.footer { 
    position: relative; 
    height:50px; 
    width:100%; 
    background:#999; 
    display: block; 
}

出典

2017-08-14 09:37:56 gudboisgn

ありがとうございました - 今はすべてがうまくいきます。 – mat1984

これが正解とマークするのに役立ちます。 – gudboisgn

はあなたの.footerクラスからposition:absoluteを削除します。

.footer { 
    left:0; 
    bottom:0; 
    height:50px; 
    width:100%; 
    background:#999; 
    display: block; 
}

出典

2017-08-14 09:40:02

ありがとうございます。今はすべてがうまくいきます。 – mat1984

@ mat1984これが役立つ場合は、回答としてマークしてください。 :) –

フッタはページの下にはなく背景の画像の下にあります

答えて

関連する問題