Javascript jquery动画更改z索引

我在做一个页面，五个绿色圆圈一旦进入就会“反弹”，然后下面就会出现一些东西。请看

我遇到了一个问题，如果我只使用“.button”类，当光标移动到div上时，动画将无法控制地反弹。 我试图通过用z索引覆盖一个单独的“.sbutton”div来解决这个问题，该索引保持在顶部，因此它应该独立于反弹的“.button”类。它被赋予了一种颜色（红色），因此可以在JSFIDLE示例中检查z索引

以下是JS部分：

$(document).ready(function(){

var selector;

$( ".sbutton" ).mouseenter(function(){
    selector = "#" + 1 + $( this ).attr('id');
    $(selector).effect("bounce", { times:1 }, 120);
});

$( ".sbutton" ).mouseover(function(){
    selector = "#" + 1 + $( this ).attr('id');
    $( "#menudisplay" ).html("<p>" + selector + "</p>");

    $( ".sbutton" ).mouseleave(function(){
        $( "#menudisplay" ).html("");
    });

});

});

$（文档）.ready（函数（）{
var选择器；
$（“.sbutton”）.mouseenter（函数（）{
选择器=“#”+1+$（this.attr（'id'）；
$（选择器）.effect（“反弹”，{times:1}，120）；
});
$（“.sbutton”）.mouseover（函数（）{
选择器=“#”+1+$（this.attr（'id'）；
$（“#menudisplay”）.html（“”+selector+”
”）；
$（“.sbutton”）.mouseleave（函数（）{
$（“#menudisplay”）.html（“”）；
});
});
});

---

我的问题是：为什么即使指定了z索引，.sbutton“div也不在“.button”div的顶部？

如果您明确设置

位置：相对
则
z索引
将起作用。原因是:

虽然z-index不是一个难以理解的属性，但由于
错误的假设可能会给刚开始的开发人员带来混乱。
出现这种混淆是因为z-index只对元素起作用
其位置属性已显式设置为绝对、固定或
相对的

如下所述：


更新的JSFIDLE:
非常感谢。我被困了好长时间想弄明白。