Finding z-index value using jQuery

user_226311 0
Viewed 46791

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.

jquery
11 Answers

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

Syntax:

var index = $("#div1").zIndex()
user_83596000

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)

user_15918090
Related