Find Highest z-index and Lowest z-index, the z-index Range

To determine the highest CSS z-index and the lowest z-index on the page, the z-index range, use the JavaScript function zIndexRange(). The code is further below.

When your code may end up on a page you do not control, and a certain div must be layered on top, function zIndexRange() can determine the current highest z-index on the page. Use JavaScript to assign a z-index to the div higher than the current one.

Similarly, when a certain div must have the lowest z-index, or must be one layer below the highest, or other z-index position relative to the highest or lowest, use function zIndexRange() to determine the z-index range.

Here is the function code.

<script type="text/javascript">
function zIndexRange() {
var highestZ;
var lowestZ;
var onefound = false;
var divs = document.getElementsByTagName('*');
if( ! divs.length ) { return Array(highestZ,lowestZ); }
for( var i=0; i<divs.length; i++ ) {
   if( divs[i].style.position && divs[i].style.zIndex ) {
      if( ! onefound ) { 
         highestZ = lowestZ = parseInt(divs[i].style.zIndex);
         onefound = true;
         }
      else {
         var ii = parseInt(divs[i].style.zIndex);
         if( ii > highestZ ) { highestZ = ii; }
         if( ii < lowestZ ) { lowestZ = ii; }
         }
      }
   }
return Array(highestZ,lowestZ);
}
</script>

Function zIndexRange() determines the z-index range of all positioned elements on the page.

Because the z-index is effective only with positioned elements, function zIndexRange() ignores all others.

The following function is an example of use:

function PresentRangeWithAlert() {
var rangeZ = zIndexRange();
alert("highest: " + rangeZ[0] + "\nlowest: " + rangeZ[1]);
}

The function can be launched with a link after the page has finished loading.

<a href="javascript:PresentRangeWithAlert()">
Get z-index range.
</a>

Will Bontrager