Absolute position and incorrect index z

Question

Explanation: There is a bird that must collect its legs before flying. The body of the bird, legs and eyes are background-image individual div s. I used the jQuery animation method to reposition the legs and place them inside the bird's body.

Problem: Instead of legs falling under the body of the bird, they remain above it.

Question: What am I doing wrong because the legs of the bird do not go under it?

Images:

• 
• 

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

You are missing the position property on #gonji .body . z-index only works with located elements

Try adding position: relative;

Answer 2

You must change the z-index .

z-index:-1; on .feet .

You can also keep the same position and simply change between .hide() and .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'); }