web-dev-qa-db-fra.com

Valeur minimale et maximale de z-index?

J'ai un div dans ma page HTML. Je montre cette div en fonction de certaines conditions, mais la div est affichée derrière l'élément HTML où j'ai pointé le curseur de la souris.

J'ai essayé toutes les valeurs pour 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 .divClass sur un clic via le <asp:hyperlink> en utilisant jQuery.

htmlcssz-index
478
Sachin Gaur
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
339
Behnam Mohammadi

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 valeur peuvent avoir des valeurs entières (désignées par <nombre entier>) ou réelles (désignées par <nombre>). Les nombres réels et les entiers sont spécifiés uniquement en notation décimale. Un <entier> consiste en un ou plusieurs chiffres de "0" à "9". Un <nombre> peut être soit un <entier>, ou bien zéro ou plusieurs chiffres suivis d'un point (.) Suivi d'un ou de plusieurs chiffres. Les nombres entiers et réels peuvent être précédés d'un "-" ou d'un "+" 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 comme valeur limitent en fait la valeur à une plage, souvent à une valeur non négative.

Donc, fondamentalement, il n'y a pas de limitation de la valeur d'index z dans la norme CSS, mais je suppose que la plupart des navigateurs la limitent aux valeurs 32 bits signées (−2147483648 à +2147483647) dans la pratique (64 serait un peu insolite n'a pas de sens d'utiliser quelque chose de moins de 32 bits ces jours-ci)

299
Tamas Czinege

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

Et la leçon à tirer est que vous devez vous méfier de la saisie de valeurs trop grandes pour la propriété z-index, car elles encombrent.

152
Ran

La valeur minimale de Z-index est 0 ; la valeur maximale dépend du type de navigateur.

enter image description here

22
Santosh Khalse

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

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

21
magikMaker

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

21
Mohammad

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

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

21
pdr

Z-Index ne fonctionne que pour les éléments auxquels position: relative; ou position: absolute; leur est appliqué. Si ce n'est pas le problème, nous aurons besoin de voir un exemple de page pour être plus utile.

EDIT: Le bon docteur a déjà donné la plus complète des explications mais la version rapide est que le minimum est 0 car il ne peut pas être un nombre négatif et le maximum.

13
roborourke

J'ai constaté que souvent si z-index ne fonctionne pas parce que ses parents/frères/soeurs n'ont pas d'index z 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 n ° 3, ou même le n ° 4, peut contester le n ° 2 pour l'espace de survol du clic/survol, bien que si vous définissez le n ° 1 sur z-index 0, les frères et sœurs qui sont z-index les mettent dans des piles indépendantes sont maintenant dans la même pile et z-index correctement.

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

6
kcar

Un utilisateur ci-dessus dit "bon, vous n'aurez jamais besoin d'aller au-delà de 10 pour la plupart des designs."

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

5
Rocky

Fait curieux, si vous utilisez un éditeur tel que Firebug et mettez un grand nombre dans z-index, le navigateur remplacera la plus grande valeur insérée par la valeur maximale.

0
Diego Mariano

Bien que INT_MAX soit probablement le pari le plus sûr, WebKit utilise apparemment les doublons en interne et autorise donc les nombres très grands (avec une certaine précision). LLONG_MAX par exemple fonctionne bien (au moins en chrome 64 bits et WebkitGTK), mais sera arrondi à 9223372036854776000.

(Bien que vous deviez examiner attentivement si vous avez vraiment, vraiment besoin de autant d'indices z…).

0
Creshal