CSS3关键帧动画的不透明性突破的z-index为了

Question

我有一个的jsfiddle一些代码在这里：

https://jsfiddle.net/hhn6r3zn/

基本上我使用CSS3关键帧动画一个div和我想要的影像将高于它 - 但即使在使用z-index时也不起作用。

然而，当我停下来改变工作透明度： https://jsfiddle.net/ax1566b0/

代码：

.pulse { 
 
    width: 32px; 
 
    background: #1A4886; 
 
    height: 12px; 
 
    border-radius: 50%; 
 
} 
 

 
@keyframes twinkly { 
 
    0% {opacity: 1; width:0px;margin-left:14px; height:0px;z-index:0;} 
 
\t 
 
    100% {opacity: 0;z-index:0;} 
 

 
} 
 

 
.pulse { 
 
    animation: twinkly 2s infinite; 
 
\t margin: auto; 
 
\t margin-top: -14px; 
 
\t z-index: 0; 
 
} 
 

 
.switch{ 
 
\t width:50px; 
 
\t height:75px; 
 
} 
 

 
.pulse-wrapper{ 
 
\t z-index:0; 
 
    background:red; 
 
} 
 
.button-wrapper{ 
 
z-index:1; 
 
    padding-left:10px; 
 
}

<div class="switch"> 
 
\t \t \t \t \t \t <div class="button-wrapper"><a type="button" class="btn"><img src="http://toptix.com/wp-content/plugins/codecanyon-5586825-image-map-hotspot-wordpress-plugin-v1.2.5/img/icon1.png" /></a></div> 
 
\t \t \t \t \t \t <div class="pulse-wrapper"><div class="pulse"></div></div> 
 
</div>

如何获取不透明度并将其保留在图像后面？

Answer 1

要应用的z-index属性元素的位置必须设置为比初始static https://css-tricks.com/almanac/properties/z/z-index/