javascripthtmlcssz-index

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


In order to set a div containing a transparent text image as the highest z-index in my document, I picked the number 10,000 and it solved my problem.

Previously I had guessed with the number 3 but it had no effect.

So, is there a more scientific way of figuring out what z-index is higher than that of all of your other elements?

I tried looking for this metric in Firebug but couldn't find it.


Solution

  • 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;
    }