css - 音频播放器小部件样式

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