23

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.

11 Answers 11

27

You can get it using css.

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

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

1
  • 7
    that will only show the z-index that is set in css. It may just say 'auto' or similar. YOu want to use $().zIndex() instead.
    – user959690
    Aug 3, 2015 at 21:38
6

You can use $('selector').zIndex().

DO NOT USE $('selector').css('z-index'). It will only tell you what (if anything) was set in the style sheet. It may just say "auto".

2
5

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'));
3
  • Thanks dear, But IE display it "undefined"
    – Baljit
    Jul 13, 2010 at 10:49
  • @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? Jul 13, 2010 at 10:52
  • I am using z-index which was wrong, it is zIndex actually. Now it is ok. Thanks for helping baljit
    – Baljit
    Jul 13, 2010 at 11:43
4

Like the css() function ?

alert($('#my_object_id').css('zIndex'));
3
  • Thanks dear, But IE display it "undefined"
    – Baljit
    Jul 13, 2010 at 10:50
  • My bad, zIndex for css(), not z-index. Jul 13, 2010 at 16:27
  • just for anyone's interest, either works (at least now): code: var z0 = _element.css('zIndex'), z1 = _element.css('z-index'), z2 = _element.css('z_index'); chrome locals: z0: "auto" z1: "auto" z2: undefined
    – ZagNut
    May 1, 2014 at 1:47
2

Besides using

$('selector').css('z-index')

you have to add postion:absolute or position:relative in your styles to element with z-index you want to get.

2

jQuery provides methods to directly set and get z-index of any element

Syntax:

var index = $("#div1").zIndex()
1
$(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.

2
  • Thanks dear, But IE display it "undefined"
    – Baljit
    Jul 13, 2010 at 10:50
  • @Baljit - So now the next most important question is where and how are you setting the z-index?
    – Anurag
    Jul 13, 2010 at 10:52
1

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.

0

what about something like

var zindex = $("#id").css("z-index");
0

use zIndex instead of z-index.

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

1
  • 3
    This is the same thing, jQuery normalizes CSS names internally, turning any caps to -lower, so zIndex gets transformed to z-index by doing this: .replace(/([A-Z])/g, "-$1" ).toLowerCase(); Jul 13, 2010 at 11:19
0

I made a simple recursive function to get the exact zIndex value in number

function getRecursiveParentZIndex(jqThis) {
  try {
    let thisTagName = jqThis.prop('tagName');

    let thisZIndex = jqThis.css('z-index');
    if (thisZIndex == '' || thisZIndex == 'auto') {
      thisZIndex = 0;
      if (thisTagName != 'HTML') {
        let newZIndex = getRecursiveParentZIndex(jqThis.parent());
        thisZIndex = newZIndex;
      }
    }

    return +thisZIndex;
  } catch (error) {
    console.log('parent Z Index error', error);

    return 0;
  }
}

let correctZindex = getRecursiveParentZIndex(jQuery('.your-selector'));

This will return the correct z-index value in number. (Note that i used ES6 syntax)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.