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

音频播放器小部件样式

1 个答案: