小编Arn*_*apa的帖子

以下代码(html&css)让我发疯... jsfiddle链接

如何使用z-index(或其他任何东西)让3个圆圈始终可见.蓝色的那个没问题,但黄色和红色隐藏了左边的圆圈.

在此先感谢您的帮助!

<div id="rSociaux" class="col-md-6 noSpace">
<a href="http://www.facebook.com/lesdieuxduvin" target="_blank" id="bg-fb" class="tile-share">
    <div  class="social-color-bg fb"></div>
    <svg class="ontop" height="100" width="100">
        <circle cx="50" cy="50" r="20"  fill="blue" />
    </svg>
</a>
<a href="http://www.twitter.com/lesdieuxduvin" target="_blank" class="tile-share">
    <div class="social-color-bg twitter"></div> 
    <svg class="ontop" height="100" width="100">
        <circle cx="50" cy="50" r="20"  fill="yellow" />
    </svg>
</a>
<a href="http://www.twitter.com/lesdieuxduvin" target="_blank"  id="bg-li" class="tile-share">
    <div class="social-color-bg linkedin"></div> 
    <svg class="ontop" height="100" width="100">
        <circle id="svgLi" cx="50" cy="50" r="20"  fill="red" />
    </svg>
</a>

CSS:

#rSociaux {
background-color: #a55fa2;
}

.ontop {
position: relative;
z-index: 10; …