css - 绝对位置和错误的 z-index

Question

剧情说明:有一只鸟在飞之前应该把它的腿收起来。鸟的 body 、腿和眼睛是单独 div 的 background-image。我使用 jQuery 的 animate 方法来改变腿的位置并将它们放在鸟的 body 内。

问题:腿没有伸到鸟的 body 下面，而是停留在上面。

问题:我做错了什么导致鸟的腿不在它下面？

图片:

1. >
2. >

HTML:

<div id="gonji">
    <div class="legs"></div>
    <div class="body">
        <div class="eye"></div>
    </div>
</div>

CSS:

#gonji { width: 80px; height: 55px; position: relative; }
#gonji .body { width: 80px; height: 55px; background: url('../gonji/gonji.png') no-repeat scroll center center transparent; z-index: 998; }
#gonji .eye { width: 5px; height: 4px; background: url('../gonji/gonji_eye.png') no-repeat scroll center center transparent; position: absolute; top: 13px; left: 30px; z-index: 999; }
#gonji .legs{ width: 9px; height: 17px; background: url('../gonji/gonji_legs.png') no-repeat scroll center center transparent; position: absolute; top: 35px; left: 30px; z-index: 1 }

JS:

var $gonjiLegs = $("#gonji").find(".legs");
var gonjiOrigLegsPos = $gonjiLegs.position();
$gonjiLegs.animate({ 'top': gonjiOrigLegsPos.top - 17 }, 'fast');

Answer 1

您在 #gonji .body 上缺少 position 属性 .. z-index 仅适用于定位元素

尝试添加position: relative;