CSS - max z-index value [duplicate]

Asked 19/12, 2011 at 18:38 Answered 24/9, 2013 at 10:59

Solved css browser cross-browser z-index

Is there a maximum / minimum possible value for the CSS z-index property?
Do different browsers have different maximum / minimum accepted values?
How will browsers handle a high / low value?

I thought I read somewhere once about a max z-index value. Maybe I'm wrong.
Thanks in advance!

Haye answered 19/12, 2011 at 18:38 Comment(1)

@Indranil Didn't see that question, thanks for the link! – Haye 19/12, 2011 at 18:44

106

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.

Cooley answered 19/12, 2011 at 18:42 Comment(2)

Interesting! Does Chrome handle this the same way Safari does? – Haye 19/12, 2011 at 18:47

Found the same information here: puidokas.com/max-z-index. So this can be the source. However, the information is from 2009. – Propend 24/9, 2013 at 10:55

Incredibly, this is the chrome's max z-index value.

.css('z-index', '99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999').css('z-index')

If you add one more digit it will go to 1e+308

Cooley answered 19/12, 2011 at 18:57 Comment(3)

I don't think so. I have the latest chrome now and anything greater than 2147483647 doesn't work. – Monson 7/3, 2014 at 12:9

The number you posted is one less than 1e+308 (10^308), so from your description I cannot follow why that should be the largest supported value. Did you try e.g. 1e310? – Conspicuous 21/6, 2017 at 15:55

Actually setting anything above 2147483647 set the zIndex to 2147483647, i.e. 2^31-1. There is a difference between setting a value, and the value actually stored (and used) by the browser. – Noticeable 21/12, 2017 at 5:12

Found some newer information from 2012:

"Chrome, Opera and IE9 seem to be the only browsers supporting a true infinite value for the z-index, while Firefox is still using 2147483647 and Safari now engages in some strange rounding off behavior after a number exceeds 16 digits in length."

Here is the source: World War Z-index

Propend answered 24/9, 2013 at 10:59 Comment(0)

Recommended topics

Hot tags