Valeur minimale et maximale de l'indice z?

J'ai un div dans ma page HTML. Je montre ce div basé sur une condition, mais le div s'affiche derrière l'élément HTML où j'ai pointé le curseur de la souris.

J'ai essayé toutes les valeurs de z-index de 0 à 999999. Quelqu'un peut-il me dire pourquoi cela se produit?

Existe-t-il une valeur minimale ou maximale de la propriété 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>

Je montre et cache le div avec .divClassonclick via l' <asp:hyperlink>utilisation 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

«z-index»

Valeur : auto | <entier> | hériter

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

Certains types de valeurs peuvent avoir des valeurs entières (dénotées par <entier>) ou des valeurs de nombres réels (dénotées par <nombre>). Les nombres réels et les entiers sont spécifiés en notation décimale uniquement. Un <entier> se compose d'un ou plusieurs chiffres de "0" à "9". Un <numéro> peut être soit un <entier>, soit zéro ou plusieurs chiffres suivis d'un point (.) Suivi d'un ou plusieurs chiffres. Les nombres entiers et réels peuvent être précédés d'un "-" ou "+" pour indiquer le signe. -0 est équivalent à 0 et n'est pas un nombre négatif.

Notez que de nombreuses propriétés qui autorisent un nombre entier ou réel en tant que valeur limitent en fait la valeur à une certaine plage, souvent à une valeur non négative.

Donc, fondamentalement, il n'y a pas de limites pour la valeur d'index z dans la norme CSS, mais je suppose que la plupart des navigateurs la limitent aux valeurs signées 32 bits (−2147483648 à +2147483647) dans la pratique (64 serait un peu hors du commun, et cela n'a pas de sens d'utiliser quelque chose de moins de 32 bits de nos jours)

Mes tests montrent que z-index: 2147483647c'est la valeur maximale, testée sur FF 3.0.1 pour OS X. J'ai découvert un bug de dépassement d'entier: si vous tapez z-index: 2147483648(qui est 2147483647 + 1) l'élément va juste derrière tous les autres éléments. Au moins, le navigateur ne plante pas.

Et la leçon à tirer est que vous devez vous garder de saisir des valeurs trop grandes pour la z-indexpropriété, car elles se terminent.

La valeur minimale de l' indice Z est 0 ; la valeur maximale dépend du type de navigateur.

Cela dépend du navigateur (bien que la dernière version de tous les navigateurs devrait atteindre 2147483638), tout comme la réaction du navigateur lorsque le maximum est dépassé.

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

C'est la valeur maximale d'un entier 32 bits: 2147483647

Voir également les documents: https://www.w3.org/TR/CSS22/visuren.html#z-index (les nombres négatifs sont autorisés)

Par expérience, je pense que le maximum correct z-indexest 2147483638.

Z-Index ne fonctionne que pour les éléments qui les ont position: relative;ou qui leur sont position: absolute;appliqués. Si ce n'est pas le problème, nous devrons voir une page d'exemple pour être plus utile.

EDIT: Le bon docteur a déjà donné l'explication la plus complète, mais la version rapide est que le minimum est 0 car il ne peut pas être un nombre négatif et le maximum - eh bien, vous n'aurez jamais vraiment besoin d'aller au-dessus de 10 pour la plupart des modèles.

J'ai constaté que souvent si z-index ne fonctionne pas, car ses parents / frères et sœurs n'ont pas de z-index spécifié.

Donc si vous avez:

<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'élément # 3, ou même # 4, peut contester # 2 pour l'espace de clic / survol, bien que si vous définissez # 1 sur z-index 0, les frères et sœurs qui ont z-index les ont mis dans des piles indépendantes sont maintenant dans la même pile et z-indexera correctement.

Cela a une description utile et assez humanisée: http://foohack.com/2007/10/top-5-css-mistakes/  

Un utilisateur ci-dessus dit "eh bien, vous n'aurez jamais vraiment besoin d'aller au-dessus de 10 pour la plupart des conceptions."

En fonction de votre projet, il se peut que vous n'ayez besoin que des z-index 0-1 ou z-index 0-10000. Vous aurez souvent besoin de jouer dans les chiffres supérieurs ... surtout si vous travaillez avec des visionneuses de lightbox (9999 semble être la norme et si vous voulez dépasser leur z-index, vous devrez dépasser cela!)

Bien que ce INT_MAXsoit probablement le pari le plus sûr, WebKit utilise apparemment des doubles en interne et permet donc de très grands nombres (avec une certaine précision). LLONG_MAXpar exemple, fonctionne bien (au moins dans le chrome 64 bits et WebkitGTK), mais sera arrondi à 9223372036854776000.

(Bien que vous deviez examiner attentivement si vous avez vraiment, vraiment besoin de ces nombreux indices z…).