Html – Minimum and maximum value of z-index


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?

.divClass {
     position: absolute; 
     left: 25px; 
     top: 25px; 
     width: 320px;
     height: 300px; 
     z-index: 1000; 
<table cellspacing="0" cellpadding="0" width="100%">
      <asp:HyperLink ID="lnkProgram" runat="server"></asp:HyperLink>
         <div class="divClass">
           Some Data

I am showing and hiding the div with .divClass onclick via the <asp:hyperlink> using jQuery.

Best Solution


Value: auto | <integer> | inherit

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 <number> 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)