How to Figure Out the Highest Z-Index in Your Document

How can you figure out the highest z-index in your document?

You could call findHighestZIndex for a particular element type such as <div> like this:

findHighestZIndex('div');

assuming a findHighestZindex function that is defined like this:

function findHighestZIndex(elem)
{
  var elems = document.getElementsByTagName(elem);
  var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1);
  for (var i = 0; i < elems.length; i++)
  {
    var zindex = Number.parseInt(
      document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"),
      10
    );
    if (zindex > highest)
    {
      highest = zindex;
    }
  }
  return highest;
}

How to find the highest z-index within a document no matter what tags they are?

This isn't the most efficient solution, but it should work. jsFiddle.

Please note you have to have a position specified in order for the z-index to return a value.

var highest = -999;

$("*").each(function() {
    var current = parseInt($(this).css("z-index"), 10);
    if(current && highest < current) highest = current;
});

alert(highest);

How to find element with biggest z-Index?

Don't try to find it - you would need to iterate all your DOM. As you are creating them dynamically, just save a reference to it and update it each time. Or just store the current highest z-index value in a max variable.

How to get element attribute based on highest z-index

You could modify the function to return the element with the highest z-index, and then just use .id to get its id.

Another issue: You're comparing zindex and highest as strings instead of numbers. I've prefixed zindex with the unary + operator before comparing, as in your example, if you were to compare a z-index of 9 and a z-index of 1000, it would believe 9 is greater.

Example:

function findHighestZIndex(elem) {  var highest = 0;  var highestElement = null;  var elems = document.getElementsByClassName(elem);
  for (var i = 0; i < elems.length; i++) {    var style = document.defaultView.getComputedStyle(elems[i], null);    var zindex = style.getPropertyValue("z-index");    var ElementDisplay = style.getPropertyValue("display");
    if ((zindex != 'auto') && (+zindex > highest) && (ElementDisplay == 'block')) {      highest = zindex;      highestElement = elems[i];    }  }
  return highestElement;}
var elem = findHighestZIndex("zindex");console.log(elem.id + " has the highest z-index.");

div.zindex {  z-index: 500;  position: absolute;  display: block;}

<div id="first-element" class="zindex" style="z-index: 1;"></div><div id="second-element" class="zindex" style="z-index: 3;"></div><div id="third-element" class="zindex" style="z-index: 5;"></div><div id="fourth-element" class="zindex" style="z-index: 100;"></div><div id="fifth-element" class="zindex" style="z-index: 99;"></div>

How to find the highest z-index using jQuery

Note that z-index only affects positioned elements. Therefore, any element with position: static will not have a z-index, even if you assign it a value. This is especially true in browsers like Google Chrome.

var index_highest = 0;   
// more effective to have a class for the div you want to search and 
// pass that to your selector
$("#layer-1,#layer-2,#layer-3,#layer-4").each(function() {
    // always use a radix when using parseInt
    var index_current = parseInt($(this).css("zIndex"), 10);
    if(index_current > index_highest) {
        index_highest = index_current;
    }
});

JSFiddle demo

A general jQuery selector like that when used with an option that returns one value will merely return the first So your result is simply the z-index of the first div that jQuery grabs. To grab only the divs you want, use a class on them. If you want all divs, stick with div.

---

Related Topics