¿Valor mínimo y máximo del índice z?

Tengo un div en mi página HTML. Estoy mostrando este div basado en alguna condición, pero el div se muestra detrás del elemento HTML donde apunté el cursor del mouse.

He intentado todos los valores para el índice z de 0 a 999999. ¿Alguien puede decirme por qué sucede esto?

¿Hay algún valor mínimo o máximo de la propiedad Z-INDEX de CSS?

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

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

Estoy mostrando y ocultando el div con .divClassonclick a través del <asp:hyperlink>uso de jQuery.

┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ Browser              │ Max z─index value │ When exceeded, value changes to: │
╞══════════════════════╪═══════════════════╪══════════════════════════════════╡
│ Firefox 0 - 2        │ 2147483647        │ element disappears               │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 3            │ 2147483647        │ 0                                │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Firefox 4+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 0 - 3         │ 16777271          │ 16777271                         │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Safari 4+            │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Internet Explorer 6+ │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Chrome 29+           │ 2147483647        │ 2147483647                       │
├──────────────────────┼───────────────────┼──────────────────────────────────┤
│ Opera 9+             │ 2147483647        │ 2147483647                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘

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

'índice z'

Valor : auto | <integer> | heredar

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

Algunos tipos de valores pueden tener valores enteros (denotados por <integer>) o valores de números reales (denotados por <number>). Los números reales y los enteros se especifican solo en notación decimal. Un <integer> consiste en uno o más dígitos "0" a "9". Un <número> puede ser un <número entero> o puede ser cero o más dígitos seguidos de un punto (.) Seguido de uno o más dígitos. Tanto los números enteros como los números reales pueden estar precedidos por un "-" o "+" para indicar el signo. -0 es equivalente a 0 y no es un número negativo.

Tenga en cuenta que muchas propiedades que permiten un número entero o real como valor en realidad restringen el valor a algún rango, a menudo a un valor no negativo.

Básicamente, no hay limitaciones para el valor del índice z en el estándar CSS, pero supongo que la mayoría de los navegadores lo limitan a valores de 32 bits con signo (−2147483648 a +2147483647) en la práctica (64 estaría un poco fuera de la parte superior, y no tiene sentido usar nada menos de 32 bits en estos días)

Mis pruebas muestran que ese z-index: 2147483647es el valor máximo, probado en FF 3.0.1 para OS X. Descubrí un error de desbordamiento de enteros: si escribe z-index: 2147483648(que es 2147483647 + 1) el elemento simplemente va detrás de todos los demás elementos. Al menos el navegador no se bloquea.

Y la lección que debe aprender es que debe tener cuidado de ingresar valores demasiado grandes para la z-indexpropiedad porque se ajustan.

El valor mínimo del índice Z es 0 ; El valor máximo depende del tipo de navegador.

Depende del navegador (aunque la última versión de todos los navegadores debería alcanzar el máximo en 2147483638), al igual que la reacción del navegador cuando se excede el máximo.

http://www.puidokas.com/max-z-index/

Es el valor máximo de un entero de 32 bits: 2147483647

Consulte también los documentos: https://www.w3.org/TR/CSS22/visuren.html#z-index (se permiten números negativos)

Por experiencia, creo que el máximo correcto z-indexes 2147483638.

Z-Index solo funciona para elementos que tienen position: relative;oposition: absolute; aplica. Si ese no es el problema, necesitaremos ver una página de ejemplo para ser más útil.

EDITAR: El buen médico ya ha dado la explicación más completa, pero la versión rápida es que el mínimo es 0 porque no puede ser un número negativo y el máximo, bueno, nunca necesitarás superar los 10 para la mayoría de los diseños.

He encontrado que a menudo si el índice z no funciona es porque sus padres / hermanos no tienen un índice z especificado.

Entonces si tienes:

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

el elemento n. ° 3, o incluso el n. ° 4, pueden estar compitiendo en el n. ° 2 por el espacio de clic / desplazamiento, aunque si configura el n. ° 1 en el índice z 0, los hermanos cuyo índice z los puso en pilas independientes ahora están en la misma pila y z-indexará correctamente.

Tiene una descripción útil y bastante humanizada: http://foohack.com/2007/10/top-5-css-mistakes/  

Un usuario de arriba dice "bueno, nunca necesitarás superar los 10 para la mayoría de los diseños".

Dependiendo de su proyecto, es posible que solo necesite índices z 0-1 o índices z 0-10000. A menudo necesitará jugar en los dígitos más altos ... especialmente si está trabajando con visores de lightbox (9999 parece ser el estándar y si desea superar su índice z, ¡deberá superar eso!)

Si bien INT_MAXes probablemente la apuesta más segura, WebKit aparentemente usa dobles internamente y, por lo tanto, permite números muy grandes (con cierta precisión). LLONG_MAXpor ejemplo, funciona bien (al menos en 64-Bit Chromium y WebkitGTK), pero se redondeará a 9223372036854776000.

(Aunque debe considerar cuidadosamente si realmente necesita tantos índices z ...).