Valore minimo e massimo di z-index?

Ho un div nella mia pagina HTML. Sto mostrando questo div in base a qualche condizione, ma il div viene visualizzato dietro l'elemento HTML in cui ho puntato il cursore del mouse.

Ho provato tutti i valori per z-index da 0 a 999999. Qualcuno può dirmi perché questo sta accadendo?

Esiste un valore minimo o massimo della proprietà Z-INDEX dei 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>

Sto mostrando e nascondendo il div con .divClassonclick tramite l' <asp:hyperlink>utilizzo di 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

'Z-index'

Valore : auto | <intero> | ereditare

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

Alcuni tipi di valore possono avere valori interi (indicati con <intero>) o valori numerici reali (indicati con <numero>). Numeri e numeri reali sono specificati solo in notazione decimale. Un <intero> è composto da una o più cifre da "0" a "9". Un <numero> può essere <intero> oppure può essere zero o più cifre seguite da un punto (.) Seguito da una o più cifre. Sia i numeri interi che i numeri reali possono essere preceduti da un "-" o "+" per indicare il segno. -0 equivale a 0 e non è un numero negativo.

Si noti che molte proprietà che consentono un numero intero o reale come valore limitano effettivamente il valore a un intervallo, spesso a un valore non negativo.

Quindi sostanzialmente non ci sono limiti per il valore z-index nello standard CSS, ma immagino che la maggior parte dei browser lo limiti ai valori con segno a 32 bit (da -2147483648 a +2147483647) in pratica (64 sarebbe un po 'in alto, e non ha senso usare qualcosa di meno di 32 bit in questi giorni)

I miei test mostrano che z-index: 2147483647è il valore massimo, testato su FF 3.0.1 per OS X. Ho scoperto un bug di overflow di numeri interi: se si digita z-index: 2147483648(che è 2147483647 + 1) l'elemento va dietro tutti gli altri elementi. Almeno il browser non si arresta in modo anomalo.

E la lezione da imparare è che dovresti stare attento a inserire valori troppo grandi per la z-indexproprietà perché si avvolgono.

Il valore minimo di Z-index è 0 ; il valore massimo dipende dal tipo di browser.

Dipende dal browser (sebbene l'ultima versione di tutti i browser dovrebbe raggiungere il massimo a 2147483638), così come la reazione del browser quando viene superato il massimo.

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

È il valore massimo di un numero intero a 32 bit: 2147483647

Vedi anche i documenti: https://www.w3.org/TR/CSS22/visuren.html#z-index (sono consentiti numeri negativi)

Per esperienza, penso che il massimo corretto z-indexsia 2147483638.

Z-Index funziona solo per elementi che hanno position: relative;o position: absolute;applicati a loro. Se questo non è il problema, dovremo vedere una pagina di esempio per essere più utili.

EDIT: Il buon dottore ha già fornito la spiegazione più completa, ma la versione rapida è che il minimo è 0 perché non può essere un numero negativo e il massimo - beh, non dovrai mai andare oltre i 10 per la maggior parte dei progetti.

Ho scoperto che spesso se z-index non funziona perché i suoi genitori / fratelli non hanno uno z-index specificato.

Quindi se hai:

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

l'articolo # 3, o anche il numero 4, potrebbe essere in conflitto # 2 per lo spazio clic / hover, anche se impostando # 1 su z-index 0, i fratelli che con z-index li mettono in stack indipendenti ora sono nello stesso stack e indicizzerà z correttamente.

Questa ha una descrizione utile e abbastanza umanizzata: http://foohack.com/2007/10/top-5-css-mistakes/  

Un utente sopra dice "beh, non avrai mai davvero bisogno di andare oltre i 10 per la maggior parte dei disegni".

A seconda del progetto, potrebbero essere necessari solo gli indici z 0-1 o gli indici z 0-10000. Avrai spesso bisogno di giocare con le cifre più alte ... specialmente se stai lavorando con i visualizzatori di lightbox (9999 sembra essere lo standard e se vuoi superare il loro indice z, dovrai superarlo!)

Sebbene INT_MAXsia probabilmente la scommessa più sicura, WebKit apparentemente usa i doppi internamente e quindi consente numeri molto grandi (con una certa precisione). LLONG_MAXad es. funziona bene (almeno in 64-bit Chromium e WebkitGTK), ma verrà arrotondato a 9223372036854776000.

(Anche se dovresti considerare attentamente se davvero, hai davvero bisogno di così tanti indici z ...).