css - 絶対位置と間違ったz-index

Question

プロットの説明：飛ぶ前に足を集める必要がある鳥がいます。鳥の体、足、目はbackground-image別々divのものです。jQueryのanimateメソッドを使用して、脚の位置を変更し、鳥の体内に配置しました。

問題：足が鳥の体の下に入る代わりに、足は鳥の体の上にとどまります。

質問：鳥の足が下に行かないようにするために、私は何を間違っているのですか？

画像：

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 .bodyz-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');
}