Question

我正在制作一个页面，其中五个绿色圆圈应该反弹＆＃39;一旦进入它们，然后就会出现一些东西。请参阅this JSFiddle example。

我遇到了一个问题，如果我只是使用＆＃34; .button＆＃34;类，当光标移过div时，动画会不受控制地弹跳。我试图通过覆盖一个单独的＆＃34; .sbutton＆＃34;来解决这个问题。具有z-index的div使其保持在顶部，因此它应该独立于弹跳＆＃34; .button＆＃34;类。它已被赋予颜色（红色），因此可以在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("");
    });

});

});

我的问题是：为什么＆＃34; .sbutton＆＃34; div不会停留在＆＃34; .button＆＃34; div，即使指定了z索引？

Answer 1

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

虽然z-index不是一个难以理解的属性，但由于错误的假设可能会给初学者造成混乱。之所以出现这种混淆，是因为z-index只适用于元素其position属性已明确设置为绝对，固定或相对的。

如以下网站所述：

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

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

jquery动画改变z-index

1 个答案: