Preparation code

<style type="text/css">
  #test1 {z-index: 50; position: aboslute;} #test2 {z-index: 1000; position: absolute;}
</style>
<div id="test1">
  Test 1
</div>
<div id="test1">
  Test 2
</div>
<div style="z-index: 25; position: absolute;">
  Test 3
</div>
<div style="z-index: 5; position: absolute;">
  Test 4
</div>
<div style="z-index: 250; position: absolute;">
  Test 5
</div>
<div style="z-index: 500; position: absolute;">
  Test 6
</div>
<div style="z-index: 525; position: absolute;">
  Test 7
</div>
<div style="z-index: 550; position: absolute;">
  Test 8
</div>
<div style="z-index: 750; position: absolute;">
  Test 9
</div>
<div style="z-index: 999; position: absolute;">
  Test 10
</div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

var zIndex, els, x, xLen, el, val;
zIndex = 0;
els = document.querySelectorAll('*');
for (x = 0, xLen = els.length; x < xLen; x += 1) {
  el = els[x];
  val = window.getComputedStyle(el).getPropertyValue('z-index');
  if (val) {
    val = +val;
    if (val > zIndex) {
      zIndex = val;
    }
  }
}
return zIndex;

var zIndex, els, x, xLen, el, val;
zIndex = 0;
els = document.querySelectorAll('*');
for (x = 0, xLen = els.length; x < xLen; x += 1) {
  el = els[x];
  if (window.getComputedStyle(el).getPropertyValue('position') !== 'static') {
    val = window.getComputedStyle(el).getPropertyValue('z-index');
    if (val) {
      val = +val;
      if (val > zIndex) {
        zIndex = val;
      }
    }
  }
}
return zIndex;

return Math.max.apply(null, Array.prototype.map.call(document.getElementsByTagName('*'), function(el) {
  var z_index = 0;
  if (window.getComputedStyle(el).getPropertyValue('position') !== 'static') {
    z_index = parseInt(window.getComputedStyle(el).getPropertyValue('z-index'), 10);
    if (isNaN(z_index)) {
      z_index = 0;
    }
  }
  return z_index;
}));

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published on 28th February 2013
• Revision 2: published on 28th February 2013
• Revision 3: published on 1st March 2013

0 comments