Minimum and maximum value of z-index

Question

I have a div in my HTML page  I am showing this div based on some condition  but the div is displaying behind the HTML element where I pointed the mouse cursor   I have tried all values for z-index from 0 - 999999  Can anyone tell me why this is happening   Is there any minimum or maximum value of Z-INDEX property of CSS    x000D   x000D   divClass   x000D       position  absolute   x000D       left  25px   x000D       top  25px   x000D       width  320px  x000D       height  300px   x000D       z-index  1000   x000D    x000D   lt table cellspacing  0  cellpadding  0  width  100   gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt asp HyperLink ID  lnkProgram  runat  server  gt  lt  asp HyperLink gt  x000D       lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D        lt td gt  x000D            lt div class  divClass  gt  x000D             Some Data x000D            lt  div gt  x000D        lt  td gt  x000D     lt  tr gt   x000D   lt  table gt  x000D   x000D   x000D    I am showing and hiding the div with  divClass onclick via the  lt asp hyperlink gt  using jQuery

User · Answer

While INT MAX is probably the safest bet  WebKit apparently uses doubles internally and thus allows very large numbers  to a certain precision   LLONG MAX e g  works fine  at least in 64-Bit Chromium and WebkitGTK   but will be rounded to 9223372036854776000    Although you should consider carefully whether you really  really need this many z indices

User · Answer

My tests show that z-index  2147483647 is the maximum value  tested on FF 3 0 1 for OS X  I discovered a integer overflow bug  if you type z-index  2147483648  which is 2147483647   1  the element just goes behind all other elements  At least the browser doesn t crash   And the lesson to learn is that you should beware of entering too large values for the z-index property because they wrap around

User · Answer

My tests show that z-index  2147483647 is the maximum value  tested on FF 3 0 1 for OS X  I discovered a integer overflow bug  if you type z-index  2147483648  which is 2147483647   1  the element just goes behind all other elements  At least the browser doesn t crash   And the lesson to learn is that you should beware of entering too large values for the z-index property because they wrap around

User · Answer

Z-Index only works for elements that have position  relative  or position  absolute  applied to them  If that s not the problem we ll need to see an example page to be more helpful   EDIT  The good doctor has already put the fullest explanation but the quick version is that the minimum is 0 because it can t be a negative number and the maximum - well  you ll never really need to go above 10 for most designs

User · Answer

It depends on the browser  although the latest version of all browsers should max out at 2147483638   as does the browser s reaction when the maximum is exceeded   http   www puidokas com max-z-index

User · Answer

http   www w3 org TR CSS21 visuren html z-index      z-index       Value       auto    lt integer gt    inherit   http   www w3 org TR CSS21 syndata html numbers     Some value types may have integer   values  denoted by  lt integer gt   or   real number values  denoted by    lt number gt    Real numbers and   integers are specified in decimal   notation only  An  lt integer gt    consists of one or more digits  0  to    9   A  lt number gt  can either be an    lt integer gt   or it can be zero or   more digits followed by a dot       followed by one or more digits  Both   integers and real numbers may be   preceded by a  -  or     to indicate   the sign  -0 is equivalent to 0 and is   not a negative number       Note that many properties that allow   an integer or real number as a value   actually restrict the value to some   range  often to a non-negative value    So basically there are no limitations for z-index value in the CSS standard  but I guess most browsers limit it to signed 32-bit values  -2147483648 to  2147483647  in practice  64 would be a little off the top  and it doesn t make sense to use anything less than 32 bits these days

User · Answer

It s the maximum value of a 32 bits integer  2147483647  Also see the docs  https   www w3 org TR CSS22 visuren html z-index  Negative numbers are allowed

User · Answer

It depends on the browser  although the latest version of all browsers should max out at 2147483638   as does the browser s reaction when the maximum is exceeded   http   www puidokas com max-z-index

User · Answer

I have found that often if z-index isn t working its because its parent siblings don t have a specified z-index     So if you have    lt div id  1  gt       lt a id  2  style  z-index 2  gt  lt  a gt       lt div id  3  style  z-index 1  gt  lt  div gt       lt button id  4  gt  lt  button gt   lt  div gt    item  3  or even  4  may be contesting  2 for the click hover space  though if you set  1 to z-index 0  the siblings who s z-index put them in independant stacks now are in the same stack and will z-index properly   This has a helpful and fairly humanized description  http   foohack com 2007 10 top-5-css-mistakes   nbsp

User · Answer

Out of experience  I think the correct maximum z-index is 2147483638

User · Answer

Z-Index only works for elements that have position  relative  or position  absolute  applied to them  If that s not the problem we ll need to see an example page to be more helpful   EDIT  The good doctor has already put the fullest explanation but the quick version is that the minimum is 0 because it can t be a negative number and the maximum - well  you ll never really need to go above 10 for most designs

User · Answer

Out of experience  I think the correct maximum z-index is 2147483638

User · Answer

It s the maximum value of a 32 bits integer  2147483647  Also see the docs  https   www w3 org TR CSS22 visuren html z-index  Negative numbers are allowed

User · Answer

While INT MAX is probably the safest bet  WebKit apparently uses doubles internally and thus allows very large numbers  to a certain precision   LLONG MAX e g  works fine  at least in 64-Bit Chromium and WebkitGTK   but will be rounded to 9223372036854776000    Although you should consider carefully whether you really  really need this many z indices

User · Answer

http   www w3 org TR CSS21 visuren html z-index      z-index       Value       auto    lt integer gt    inherit   http   www w3 org TR CSS21 syndata html numbers     Some value types may have integer   values  denoted by  lt integer gt   or   real number values  denoted by    lt number gt    Real numbers and   integers are specified in decimal   notation only  An  lt integer gt    consists of one or more digits  0  to    9   A  lt number gt  can either be an    lt integer gt   or it can be zero or   more digits followed by a dot       followed by one or more digits  Both   integers and real numbers may be   preceded by a  -  or     to indicate   the sign  -0 is equivalent to 0 and is   not a negative number       Note that many properties that allow   an integer or real number as a value   actually restrict the value to some   range  often to a non-negative value    So basically there are no limitations for z-index value in the CSS standard  but I guess most browsers limit it to signed 32-bit values  -2147483648 to  2147483647  in practice  64 would be a little off the top  and it doesn t make sense to use anything less than 32 bits these days

User · Answer

http   www w3 org TR CSS21 visuren html z-index      z-index       Value       auto    lt integer gt    inherit   http   www w3 org TR CSS21 syndata html numbers     Some value types may have integer   values  denoted by  lt integer gt   or   real number values  denoted by    lt number gt    Real numbers and   integers are specified in decimal   notation only  An  lt integer gt    consists of one or more digits  0  to    9   A  lt number gt  can either be an    lt integer gt   or it can be zero or   more digits followed by a dot       followed by one or more digits  Both   integers and real numbers may be   preceded by a  -  or     to indicate   the sign  -0 is equivalent to 0 and is   not a negative number       Note that many properties that allow   an integer or real number as a value   actually restrict the value to some   range  often to a non-negative value    So basically there are no limitations for z-index value in the CSS standard  but I guess most browsers limit it to signed 32-bit values  -2147483648 to  2147483647  in practice  64 would be a little off the top  and it doesn t make sense to use anything less than 32 bits these days

User · Answer

Z-Index only works for elements that have position  relative  or position  absolute  applied to them  If that s not the problem we ll need to see an example page to be more helpful   EDIT  The good doctor has already put the fullest explanation but the quick version is that the minimum is 0 because it can t be a negative number and the maximum - well  you ll never really need to go above 10 for most designs

User · Answer

A user above says  well  you ll never really need to go above 10 for most designs     Depending on your project  you may only need z-indexes 0-1  or z-indexes 0-10000  You ll often need to play in the higher digits   especially if you are working with lightbox viewers  9999 seems to be the standard and if you want to top their z-index  you ll need to exceed that

User · Answer

Conclusion Maximum z-index value is 2 147 483 647 and more than this convert to 2 147 483 647      Browser Maximum More Than Maximum     Chrome  gt   29 2 147 483 647 2 147 483 647   Opera  gt   9 2 147 483 647 2 147 483 647   IE  gt   6 2 147 483 647 2 147 483 647   Safari  gt   4 2 147 483 647 2 147 483 647   Safari   3 16 777 271 16 777 271   Firefox  gt   4 2 147 483 647 2 147 483 647   Firefox   3 2 147 483 647 0   Firefox   2 2 147 483 647 Bug  tag hidden     All Values tested in BrowserStack

User · Answer

Conclusion Maximum z-index value is 2 147 483 647 and more than this convert to 2 147 483 647      Browser Maximum More Than Maximum     Chrome  gt   29 2 147 483 647 2 147 483 647   Opera  gt   9 2 147 483 647 2 147 483 647   IE  gt   6 2 147 483 647 2 147 483 647   Safari  gt   4 2 147 483 647 2 147 483 647   Safari   3 16 777 271 16 777 271   Firefox  gt   4 2 147 483 647 2 147 483 647   Firefox   3 2 147 483 647 0   Firefox   2 2 147 483 647 Bug  tag hidden     All Values tested in BrowserStack

User · Answer

A user above says  well  you ll never really need to go above 10 for most designs     Depending on your project  you may only need z-indexes 0-1  or z-indexes 0-10000  You ll often need to play in the higher digits   especially if you are working with lightbox viewers  9999 seems to be the standard and if you want to top their z-index  you ll need to exceed that

User · Answer

I have found that often if z-index isn t working its because its parent siblings don t have a specified z-index     So if you have    lt div id  1  gt       lt a id  2  style  z-index 2  gt  lt  a gt       lt div id  3  style  z-index 1  gt  lt  div gt       lt button id  4  gt  lt  button gt   lt  div gt    item  3  or even  4  may be contesting  2 for the click hover space  though if you set  1 to z-index 0  the siblings who s z-index put them in independant stacks now are in the same stack and will z-index properly   This has a helpful and fairly humanized description  http   foohack com 2007 10 top-5-css-mistakes   nbsp

User · Answer

http   www w3 org TR CSS21 visuren html z-index      z-index       Value       auto    lt integer gt    inherit   http   www w3 org TR CSS21 syndata html numbers     Some value types may have integer   values  denoted by  lt integer gt   or   real number values  denoted by    lt number gt    Real numbers and   integers are specified in decimal   notation only  An  lt integer gt    consists of one or more digits  0  to    9   A  lt number gt  can either be an    lt integer gt   or it can be zero or   more digits followed by a dot       followed by one or more digits  Both   integers and real numbers may be   preceded by a  -  or     to indicate   the sign  -0 is equivalent to 0 and is   not a negative number       Note that many properties that allow   an integer or real number as a value   actually restrict the value to some   range  often to a non-negative value    So basically there are no limitations for z-index value in the CSS standard  but I guess most browsers limit it to signed 32-bit values  -2147483648 to  2147483647  in practice  64 would be a little off the top  and it doesn t make sense to use anything less than 32 bits these days

User · Answer

Z-Index only works for elements that have position  relative  or position  absolute  applied to them  If that s not the problem we ll need to see an example page to be more helpful   EDIT  The good doctor has already put the fullest explanation but the quick version is that the minimum is 0 because it can t be a negative number and the maximum - well  you ll never really need to go above 10 for most designs

[html] Minimum and maximum value of z-index?

Examples related to html

Examples related to css

Examples related to z-index