CSS - Max Z-Index Value

CSS - max z-index value

These are the max values.

Browser         Max z-index value  When exceeded, value changes to:
Internet Explorer 6 2147483647  2147483647
Internet Explorer 7 2147483647  2147483647
Internet Explorer 8 2147483647  2147483647
Firefox 2           2147483647  *element disappears*
Firefox 3           2147483647  0
Safari 3            16777271    16777271
Safari 4            2147483647  2147483647
Chrome 29           2147483647  2147483647
Opera 9             2147483647  2147483647

Found it somewhere on the web.

Why css z-index property is not working even z-index value of one component is greater than other target component?

z-index is working on positioned elements : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

So you could add position: relative; to your elements you want to change z-index prop

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 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.

Is there an upper limit to z-index values in web browsers?

Keep in mind that z-index doesn't work globally, but only within a 'stacking context' (which has hard to digest definition in CSS), and if the ad establishes it's own stacking context, then z-index values you set elsewhere may not affect it at all.

However more likely it's an issue of "windowed" Flash (object without wmode=transparent attribute), which browsers render on top of everything, as if was a window above browser's window. In such case z-index won't help at all. You'll need to force ad[-provider] to use wmode=transparent or use some crazy hacks with iframes.

---

Related Topics