CSS3 Keyframe Animated непрозрачности перерыв порядка г-индекс

Question

У меня есть некоторый код в JSFiddle здесь:

https://jsfiddle.net/hhn6r3zn/

В основном я оживляющий DIV с помощью CSS3 ключевых кадров, и я хочу, чтобы изображение, чтобы быть выше IT- но даже при использовании 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/