音频播放器小部件造型

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;这个音频小部件在固定标题图像后面浮动。我希望这有帮助。