CSS - max z-index value

Question

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!

@Indranil Didn't see that question, thanks for the link! – Web_Designer Dec 19 '11 at 18:44 — Web_Designer, Dec 19 '11 at 18:44

score 106 · Accepted Answer · edited Oct 08 '13 at 20:41

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.

edited Oct 08 '13 at 20:41

Mac_Weber

3
3

answered Dec 19 '11 at 18:42

Netizen110

1,644
4
18
21

1

Interesting! Does Chrome handle this the same way Safari does? – Web_Designer Dec 19 '11 at 18:47
3

Found the same information here: http://www.puidokas.com/max-z-index/. So this can be the source. However, the information is from 2009. – TechAurelian Sep 24 '13 at 10:55

score 17 · Answer 2 · answered Dec 19 '11 at 18:57

17

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

answered Dec 19 '11 at 18:57

Netizen110

1,644
4
18
21

11

I don't think so. I have the latest chrome now and anything greater than `2147483647` doesn't work. – Alexander Suraphel Mar 07 '14 at 12:09
1

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? – Njol Jun 21 '17 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. – Déjà vu Dec 21 '17 at 05:12

score 1 · Answer 3 · answered Sep 24 '13 at 10:59

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

CSS - max z-index value

3 Answers3

Linked