音頻播放器小部件造型

Question

在我的博客http://ukgraffiti.tumblr.com我有一個小音頻播放器。我已經使用CSS來使小部件的形狀變得圓滑，並且將它放置在相關圖像的左上角（您可以在博客頂部的最新帖子中看到它）。

在我的瀏覽器（Firefox 46.0）中，播放器的底部和左側被切斷。

此外，當您向上滾動頁面時，音頻小部件將浮動在固定標題圖像的上方，而不是像其餘頁面內容那樣位於其後面。

任何人都可以解釋是什麼導致了修剪左側和底部的球員，以及如何確保它滾動後頭部後面？

CSS的音頻播放器：

#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

請嘗試以下樣式供玩家：

#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; 
} 

而在選擇的#header添加的z-index：1;這個音頻小部件在固定標題圖像後面浮動。我希望這有幫助。