Javascript CSS3关键帧动画不透明度打断z索引顺序

我在JSFIDLE中有一些代码：

基本上，我正在使用CSS3关键帧设置一个div的动画，我希望图像位于其上方，但即使使用z索引，它也不起作用

但是，当我停止更改不透明度时，它会起作用：

代码：

.pulse{
宽度：32px；
背景#1A4886；
高度：12px；
边界半径：50%；
}
@关键帧闪烁{
0%{不透明度：1；宽度：0px；左边距：14px；高度：0px；z索引：0；}
100%{不透明度：0；z指数：0；}
}
.脉搏{
动画：闪烁2s无限；
保证金：自动；
利润上限：-14px；
z指数：0；
}
.开关{
宽度：50px；
高度：75px；
}
.脉冲包装器{
z指数：0；
背景：红色；
}
.按钮包装{
z指数：1；
左侧填充：10px；
}

---

对于要应用的

z-index

属性，元素的位置必须设置为初始

静态

---

记住使用

z-index

您需要指定一个位置。就是这样，谢谢@user1672694glad我可以帮忙。我现在已经把我的评论作为答案发布了。