Mininum 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 DIV is displaying behind any HTML element where I pointed the mouse cursor.
I have tried all value for Z-INDEX property from 0 - 999999.

Can anyone tell me why this is happening?

Is there any minimum or maximum value of Z-INDEX property of CSS?
For example, Following HTML is defined in an ascx control:

<table cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td>
      <asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
    </td>
  </tr>
  <tr>
     <td>
         <div class="divClass">
           Some Data
         </div>
     </td>
  </tr> 
</table>

And the CSS is:

.divClass
{
     position: absolute; 
     left: 25px; 
     top: 25px; 
     width: 320px;
     height: 300px; 
     z-index: 1000; 
     display: none;
}

And I am showing and hiding specific DIV for Hyperlink using +Jquery which is on main page.

Answer 1

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.

Answer 2

http://www.w3.org/TR/CSS21/visuren.html#z-index

'z-index'

Value: auto | <integer> | inherit

http://www.w3.org/TR/CSS21/syndata.html#numbers

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits "0" to "9". A can either be an <integer>, 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)

Answer 3

My tests indeed show that z-index: 2147483647 is the max value, tested on FF 3.0.1 for OS X. But what's funny is the integer overflow bug I discovered... If you type z-index: 214748364**8** (which is 2147483647 + 1) the element just goes behind all other elements. LOL, at least the browser doesn't crash...

And the lesson to learn is you should beware of entering too large values for z-index b/c they wrap around.

Answer 4

Out of experience, I think the correct Max Z-Index is

2147483638

Answer 5

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/