Audio Player Widget Styling

Question

Auf meinem Blog hier http://ukgraffiti.tumblr.com Ich habe ein wenig Audio-Player. Ich habe CSS verwendet, um das Widget in Form zu bringen und es so zu positionieren, dass es sich in der oberen linken Ecke des zugehörigen Bildes befindet (Sie können es im neuesten Beitrag oben im Blog sehen).

In meinem Browser (Firefox 46.0) ist der untere und linke Rand des Players abgeschnitten.

Auch wenn Sie die Seite nach oben scrollen, schwebt das Audio-Widget über das fixierte Header-Bild statt hinter dem Rest des Seiteninhalts.

Kann jemand erklären, was das Trimmen auf der linken und unteren Seite des Players verursacht, und auch, wie man sicherstellt, dass es hinter der Kopfzeile geht, wenn Sie nach oben scrollen?

CSS für Audio-Player:

#player { 
width:30px; 
height:30px; 
overflow:hidden; 
position:absolute; 
margin-top:45px; 
margin-bottom:30px; 
margin-left:20px; 
padding: 0 0 0 2px; 
-moz-border-radius: 30px; 
-webkit-border-radius: 30px; 
border-radius: 30px; } 

Answer 1

Bitte versuchen Sie die unten Stil für Spieler:

#player { 
    width:27px; 
    height:27px; 
    overflow:hidden; 
    position:absolute; 
    margin-top:45px; 
    margin-bottom:30px; 
    margin-left:20px; 
    border:1px solid white; 
    line-height:46px; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    z:index:-1; 
} 

Und im #header Selektor hinzufügen z-index: 1; Damit schwebt das Audio-Widget hinter dem fixierten Header-Bild. Ich hoffe das hilft.