Question

以下代码（html＆amp; css）让我发疯... jsfiddle link

如何使用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;
}

.tile-share {
display: inline-block;
position: relative;
left: 33%;
-webkit-transform: translateX(-50%) translateY(-0%);
-moz-transform: translateX(-50%) translateY(-0%);
-ms-transform: translateX(-50%) translateY(-0%);
-o-transform: translateX(-50%) translateY(-0%);
transform: translateX(-50%) translateY(-0%);
}

#rSociaux {
overflow: hidden;
}

#rSociaux svg {
position: relative;
z-index: 1000; }

#rSociaux .social-color-bg {
pointer-events: none;
position: absolute;
border-radius: 100%;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

#rSociaux .social-color-bg.fb {
background: blue;
}

#rSociaux .social-color-bg.twitter {
background: yellow;
}

#rSociaux .social-color-bg.linkedin {
background: red;
}


#rSociaux .tile-share:hover .social-color-bg {
width: 100% !important;
height: 100% !important;
-webkit-transform: scale(20);
-moz-transform: scale(20);
-ms-transform: scale(20);
-o-transform: scale(20);
transform: scale(20);
}

Answer 1

添加以下内容：

#rSociaux .tile-share{
    z-index:10;
}

#rSociaux .tile-share:hover{
    z-index:9;
}

并删除其他z-index引用解决了问题

here is工作小提琴

Answer 2

您的z-index不起作用，因为您将其应用于完全不同的元素。将相同的元素用于基于悬停和非悬停的z-index更改。 z-index是不绝对值，其中z-index较高的元素总是位于顶部。

.tile-share{
   z-index: 5;
}

.tile-share:hover{
    z-index: 3;
}

http://jsfiddle.net/dqup4ptf/4/

Answer 3

您还可以将a标记定位为：

#rSociaux >a{z-index: 10;}
#rSociaux >a:hover{z-index: 9;}

http://jsfiddle.net/maio/dqup4ptf/6/

z-index不能用于我的动画

3 个答案: