tags:

views:

70

answers:

7

How to find a z-index value of a element by jquery i.e. I have 2 divs, both are positioned absolute and z-index 10, 1000 respectively.

But unfortunately IE6 displaying second div which has z-index 1000 below the first one.

So I want to check what the z-index value of second one and first one at run time in IE6.

Please help.

A: 

If they have IDs for example (or any selector you can find them by) use .css(), like this:

var zIndex = $("#div1").css('z-index');

Or the more complete:

alert("Div 1 zIndex: " + $("#div1").css('z-index'));
alert("Div 2 zIndex: " + $("#div2").css('z-index'));
Nick Craver
power of simultaneity ;)
Michael Lumbroso
Thanks dear,But IE display it "undefined"
Baljit
@Baljit - If IE is displaying undefined...then they're getting no `z-index`, which would be the problem :) What selector are you using to set the `z-index`? is it a CSS selector that IE doesn't understand/handle?
Nick Craver
I am using z-index which was wrong, it is zIndex actually. Now it is ok. Thanks for helpingbaljit
Baljit
@Baljit - Make sure to accept answers to your questions, helps get better/faster answers from a wider audience as you go (a high accept rate is a very appealing to answerers).
Nick Craver
A: 

Hi, what about something like

var zindex = $("#id").css("z-index");
Michael Lumbroso
A: 

Like the css() function ?

alert($('#my_object_id').css('zIndex'));
streetpc
Thanks dear,But IE display it "undefined"
Baljit
My bad, `zIndex` for `css()`, not `z-index`.
streetpc
A: 
$(elem).css('z-index');

Also, where are you setting the z-indexes. If it's in an inline style vs a style block, then you may see different results. So:

<div style="z-index: 1000">..</div>

vs

<style>
div {
    z-index: 1000;
}
</style>

may give different results. Also, remember that going by your logic is an exercise in vain with IE.

Anurag
Thanks dear,But IE display it "undefined"
Baljit
@Baljit - So now the next most important question is where and how are you setting the z-index?
Anurag
A: 

You can get it using css.

$("#your-div").css("z-index");

Ref: http://api.jquery.com/css/

Krunal
A: 

use zIndex instead of z-index.

$('selector').css('zIndex');

sushil bharwani
This is the same thing, jQuery normalizes CSS names internally, turning any caps to `-lower`, so [`zIndex` gets transformed to `z-index`](http://github.com/jquery/jquery/blob/master/src/css.js#L129) by doing this: `.replace(/([A-Z])/g, "-$1" ).toLowerCase();`
Nick Craver
thanks. I didnt knew this
sushil bharwani
A: 

Your code must be broken. Check this, it works.

If you don't set a z-index value FF and Chrome will display auto, and IE 0.

Undefined means there is some error in your code.

galambalazs