jquery动画改变z-index答案

【问题标题】：jquery animation changing z-indexjquery动画改变z-index
【发布时间】：2014-06-20 19:01:12
【问题描述】：

我正在制作一个页面，其中五个绿色圆圈在进入它们时应该“反弹”一次，然后下面应该会出现一些东西。请参阅this JSFiddle example。

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

这是 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("");
    });

});

});

我的问题是：为什么“.sbutton” div 不停留在“.button” div 的顶部，即使指定了 z-indexes？

【问题讨论】：

标签： javascript jquery css z-index

【解决方案1】：

如果您明确设置position: relative，z-index 将起作用。原因是：

虽然 z-index 不是一个难以理解的属性，但由于错误的假设可能会给初级开发人员造成混淆。发生这种混淆是因为 z-index 仅适用于元素其位置属性已明确设置为绝对、固定或相对的。

如下所述：

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

更新 jsfiddle：http://jsfiddle.net/7Ztap/

【讨论】：

非常感谢。我被困了很久才想明白。