CSS Sticky Bar Overlapping

Question

Ich benutze den Sticky Footer Code von HERE und aus irgendeinem Grund überlappt die Sticky Footer meine .content-Klasse auf meiner Website.

Meine Website: http://tangotest.comoj.com

Wie Sie das 910x50px Bild unten sehen können, das weiße Feld überlappt, wenn Sie an der Unterseite auf einer bestimmten Seite blättern.

Ich brauche das 910x50px-Bild unten im weißen Feld, wenn Sie nach unten scrollen.

CSS für das weiße Feld .content Klasse

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

CSS für die Sticky Footer .Player Klasse

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

Answer 1

Sie könnten versuchen, die Polsterung der Seite Körper zu erhöhen.

Derzeit ist es:

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

}

versuchen Ändern des padding-bottom zu

padding-bottom: 30px; 

Answer 2

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

ist es das, was Sie wollen? wenn nicht das.

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

Answer 3

Sie können margin-bottom auf Fußzeile:

Jede Marge von mehr als 10px tun:

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

weitere Lücke zwischen weißen div zu erhöhen und festen Boden div Sie Marge erhöhen -bottom zu größeren Werten.