Valeur minimale et maximale de l'indice z?

519

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.

Sachin Gaur
la source
Le problème n'est probablement pas lié spécifiquement à z-index. Pouvez-vous donner quelques exemples HTML et CSS qui illustrent le comportement? Dans quels navigateurs rencontrez-vous cela?
roryf
Juste par intérêt, pourriez-vous essayer la même chose sans utiliser le tableau, juste du contenu, le lien et le div. Mettez également une couleur d'arrière-plan sur le div juste pour être certain pendant que vous développez.
roborourke
60
msgstr "a essayé toutes les valeurs de la propriété Z-INDEX de 0 à 999999". Je trouve cela difficile à croire.
sampathsris
4
@Krumia Je ne le fais pas, il pourrait essayer toutes les valeurs d'index z entre 0-999999 avec JS ... Juste une option ...
FullyHumanProgrammer
4
Personne n'a réellement mentionné le display: nonedans son CSS?
Mark Baijens

Réponses:

386
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘
Behnam Mohammadi
la source
4
Je pense qu'il veut dire négatif.
Gavin
42
Comment les avez-vous rencontrés?
2540625
Des numéros pour Safari mobile / Chrome / Firefox?
2540625
30
Pour ceux intéressés 2,147,483,647 = 2^31 - 1,. C'est un Mersenne prime.
Reggie Pinkham
2
@BehnamMohammadi, quel devrait être le comportement standard?
Pacerier
307

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)

Tamas Czinege
la source
17
Il est important de noter que la valeur maximale de l'index z sur Safari 3 était 16777271. Cela a été élevé au standard 32 bits dans Safari 4, ce n'est donc un problème que si vous ciblez des navigateurs plus anciens. De plus, même dans Safari 3, tout ce qui est supérieur à 16777271 est plafonné à cela, donc à moins que vous n'utilisiez des valeurs d'index z absurdement grandes pour commander plusieurs éléments, vous ne devriez pas avoir de problème (c'est-à-dire définir un élément sur une valeur d'index z de 2147483647 garantira que l'élément reste tout en haut dans n'importe quel navigateur, sauf s'il est en concurrence avec un autre élément qui a également un z-index> 16777271).
Doktor J
6
@DoktorJ Est-ce que quelqu'un sait pourquoi c'est 16777271? Il semble bizarre qu'il soit 56 de plus que la limite d'un entier non signé 24 bits.
Jools
2
@Jools selon le développeur du webkit Eric Seidel , c'était le résultat de l'utilisation d'un champ de bits 24 bits -log base 2 (lg) = lg(16777271)
Janosch
2
@Janosch Désolé, je ne comprends pas. lg (16777271) est supérieur à 24. J'aurais pensé qu'un champ de bits 24 bits n'était pas assez grand.
Jools
@Janosch, 2 ^ 24 = 16777216. 16777271nécessitera donc 25 bits.
Pacerier
157

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.

Ran
la source
57
Parce que (2147483647) est la plus grande valeur positive d'un entier signé sur un système d'exploitation 32 bits ...
Badr Hari
4
Je ne pense pas que le nombre se terminera si la valeur est supérieure à 2147483647 ... Je pense qu'il est plus probable que les navigateurs traiteront simplement n'importe quel nombre au-dessus de cette valeur comme une valeur constante, par exemple 0.
oliver-clare
3
Peut-être que votre valeur devient négative ... Par exemple -2147483647
Wahyu Fahmy
3
Dans les navigateurs modernes, le dépassement de 2147483648 ne déplace pas les éléments derrière d'autres éléments
Zach Saucier
25

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

entrez la description de l'image ici

Santosh Khalse
la source
4
En fait, le z-index peut être un nombre négatif. Les éléments positionnés avec des index z négatifs sont classés en premier dans un contexte d'empilement, ils apparaîtront donc derrière tous les autres éléments. Voir également les documents: w3.org/TR/CSS22/visuren.html#z-index
magikMaker
17
Facile à copier et coller: 2147483647
chandelier
L'index Z peut être un nombre négatif, mais pour Exemple Safari pour iOS 11.0.2 a un problème avec cette propriété.
kris_IV
Santosh, où avez-vous obtenu ces chiffres? Avez-vous copié la réponse de Behnam et ajouté IE7 et IE8?
CPHPython
21

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/

pdr
la source
21

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

Mohammad
la source
7
On dirait que tu as tort. Selon les tests effectués en 2009 par Eric Poidokas, la valeur maximale de l'indice z (sans risque de chute d'éléments en cas de débordement) est de 2147483647.
Martin
14

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.

roborourke
la source
5
J'ai utilisé "z-index: -1;" avant de "couler" un élément pour qu'il ne puisse pas être cliqué. Ce n'est probablement pas une solution populaire, mais cela fonctionne. : P
Ty.
17
Je sais que c'est un peu tard, mais ça marche avec la position: fixe aussi.
TCCV
7
AFAIK, vous pouvez avoir des entiers négatifs pour la valeur de l'indice z.
d -_- b
Je me demande pourquoi je spécifie z-index: 1000, mais le navigateur m'a dit que le z-index réel est automatique. position fait l'affaire.
Will Wu
6

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/  

kcar
la source
4
Pendant que nous sommes sur le sujet, un autre problème courant n'est pas d'avoir position: relative;quelque chose comme ça.
Ryan Taylor
1
En fait, relisez simplement le message d'origine. Vous avez raison, c'est probablement son problème.
Ryan Taylor
5

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

Rocheux
la source
0

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…).

Creshal
la source