Valeur minimale et maximale de z-index ?

Question

J'ai un div dans ma page HTML. J'affiche cette division en fonction de certaines conditions, mais la division 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 pour 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>

J'affiche et cache le div avec .divClass onclick via le <asp:hyperlink> en utilisant jQuery.

Answer 1

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

z-index

Valeur : auto | <integer> | inherit

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

Certains types de valeurs peuvent avoir des entiers (désignées par <initiale>) ou des valeurs des valeurs réelles (désignées par <number>). Les nombres réels et les entiers sont spécifiés en notation décimale décimale uniquement. Un <nombre entier> consiste en un ou plusieurs chiffres de "0" à "9". Un <nombre> peut être soit un <intégral>, soit être constitué de zéro ou de plusieurs chiffres suivis d'un point (.) suivi d'un ou plusieurs chiffres. Les deux nombres entiers et réels peuvent être précédés d'un "-" ou "+" pour indiquer le signe le signe. -0 est équivalent à 0 et n'est pas n'est pas un nombre négatif.

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

En fait, il n'y a pas de limitations pour la valeur z-index dans la norme CSS, mais je suppose que la plupart des navigateurs la limitent à des valeurs signées de 32 bits (2147483648 à +2147483647) dans la pratique (64 serait un peu exagéré, et cela n'a pas de sens d'utiliser moins de 32 bits de nos jours).

Answer 2

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

Et la leçon à retenir est qu'il faut se méfier d'entrer des valeurs trop grandes pour le paramètre z-index car ils s'enroulent autour.

Answer 3

Par expérience, je pense que le maximum correct z-index est 2147483647.

Answer 4

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

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

Answer 5

Cela dépend du navigateur (même si la dernière version de tous les navigateurs devrait plafonner à 2147483638), tout comme la réaction du navigateur lorsque le maximum est dépassé.