绝对位置和错误的z指数

Question

剧情说明：飞行前有一只鸟应该收集它的腿。鸟的身体，腿部和眼睛是background-image个独立的div个。我使用jQuery的动画方法来改变腿部位置并将它们放入鸟体内。

问题：而不是在鸟的身体下方的腿，它们保持在它的上方。

问题：我做错了什么让鸟的腿不受其影响？

图片：

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

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

尝试添加position: relative;

Answer 2

您必须更改z-index。

z-index:-1;上的

.feet。

您也可以保持相同的位置，只需在.hide()和.show()之间进行更改。

Answer 3

<强> CSS

#gonji { width: 80px; height: 55px; position: relative; }
#gonji .body { width: 80px; height: 55px; background:red; z-index: 998; }
#gonji .eye { width: 5px; height: 4px; background:blue; position: absolute; top: 13px; left: 30px; z-  index: 999; }
#gonji .feet { width: 9px; height: 17px; background:black; position: absolute; top: 55px; left: 30px; }

<强> JS

    $(document).ready(function(){
setInterval(callMe,1000);
 });

function callMe(){
var $gonjiFeet = $("#gonji").find(".feet");
var gonjiOrigFeetPos = $gonjiFeet.position();
$gonjiFeet.css('z-index','-1').animate({ 'top': gonjiOrigFeetPos.top - 20 }, 'fast');
$gonjiFeet.animate({ 'top': '55' }, 'fast');
}