CODEWITHSUNDEEP
cssz-indexcss-position
Farid Rn
Farid Rn

Reputation: 3207

Absolute position and wrong z-index

Plot Explanation: There's a bird that should collect it's legs before flying. Bird's body, legs and eye are background-images of separate divs. I used jQuery's animate method to change legs position and put them inside the bird's body.

Problem: Instead of legs going under the bird's body, they stay above it.

Question: What am I doing wrong that makes bird's legs not going under it?

Images:

  1. Before animation
  2. After Animation

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');

Upvotes: 4

Views: 5379

Answers (3)

Venugopal
Venugopal

Reputation: 1896

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

Upvotes: 0

user2129623
user2129623

Reputation: 1256

You're missing a position property on #gonji .body .. z-index only works on positioned elements

Try adding position: relative;

Upvotes: 15

Ali Bassam
Ali Bassam

Reputation: 9959

You must change the z-index.

z-index:-1; on .feet.

You can as well keep the same position, and just change between .hide() and .show().

Upvotes: 2

Related Questions