CSS Sticky Bar Overlapping

Question

私はHEREのスティッキーフッタコードを使用しています。何らかの理由でスティッキーフッタが自分のサイトの.contentクラスと重なっています。

マイサイト：http://tangotest.comoj.com

あなたが任意のページの一番下までスクロールすると一番下に910x50px画像は、ホワイトボックスと重なって見ることができるように。

下にスクロールすると、910x50pxの画像が白いボックスの下部にくる必要があります。

スティッキーフッター.playerクラスのホワイトボックス.contentクラスのCSS

.content { 
padding-left: 5px; 
padding-right: 5px; 
padding-bottom: 5px; 
margin: auto; 
width: 50%; 
background: white; 
} 

CSS

.player { 
position: fixed; 
left: 470px; 
bottom: 0px; 
height: 50px; 
width: 50%; 
background: transparent; 
} 

Answer 1

あなたはページ本体のパディングを増やしてみてください。

は、現在は次のとおりです。

body { 
background-image: url('http://tangoworldwide.net/Themes/Altier_2/images/tango/city01.jpg'); 
padding-top: 20px; 
padding-bottom: 20px; 

}

padding-bottom: 30px; 

Answer 2

.player { 
position: relative; 
left: 200px; 
bottom: 20px; 
height: 50px; 
width: 50%; 
background: transparent; 
} 

にパディング下を変えてみては何をしたい、このですか？そうでなければ

.player { 
position: fixed; 
left: 200px; 
bottom: 0px; 
height: 50px; 
width: 50%; 
background: transparent; 
} 

Answer 3

あなたはフッターに余白下を設定することができます。

10pxのより大きい任意の余白が行います。

.footer { 
     padding-bottom: 10px; 
     padding-left: 5px; 
     padding-right: 5px; 
     margin: auto; 
     margin-bottom: 10px; 
     width: 50%; 
     background: white; 
    } 

白のdivと固定下のdivの間に、さらにギャップを高めるためにあなたはマージンを増やすことができます-bottomから大きな値へ