Minimum et maximum de la valeur de z-index?
J'ai un div dans ma page HTML. Je suis en train de montrer ce div basée sur une condition, mais la div est derrière l'affichage de 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 me dire pourquoi ce qui se passe?
Est-il une valeur minimale ou maximale de la propriété Z-INDEX de CSS?
CSS:
.divClass {
position: absolute;
left: 25px;
top: 25px;
width: 320px;
height: 300px;
z-index: 1000;
}
HTML:
<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 suis en train de montrer et de cacher le div avec .divClass
onclick via le <asp:hyperlink>
à l'aide de jQuery.
- La question n'est probablement pas le faire avec un z-index plus précisément. Pouvez-vous donner quelques exemple de code HTML et CSS qui illustre le comportement? Quels sont les navigateurs vous rencontrez ce dans?
- Juste par intérêt pourriez-vous essayer la même chose sans l'aide de la table, juste un peu de contenu, le lien et la div. Aussi mettre une couleur de fond sur la div juste pour être certain alors que vous êtes en développement.
- "tout essayé valeur pour la propriété Z-INDEX de 0 - 999999". Je trouve cela difficile à croire.
- Je n'ai pas, Il pourrait essayer tous les z-valeurs de l'indice entre 0-999999 avec JS... Juste une option...
- Pas un fait mentionné le
display: none
dans son CSS? - Personne ne le mentionne parce que la question a dit qu'il était indiqué sur le clic de l'ancrage de l'élément via jQuery. Mais depuis le 3 autres utilisateurs raté avec vous, j'ai édité, il est hors de question pour éviter à l'avenir toute confusion.
Vous devez vous connecter pour publier un commentaire.
#div1 {z-index: 2147483647;} #div2 {z-index: 2147483647+(1, 2, 3...n)}
) et de voir si les modifications apportées à la div est affectée2,147,483,647 = 2^31 - 1
. C'est un nombre de Mersenne premier.http://www.w3.org/TR/CSS21/visuren.html#z-index
http://www.w3.org/TR/CSS21/syndata.html#numbers
Donc, fondamentalement, il n'y a pas de limitations pour le z-index de la valeur dans le CSS standard, mais je suppose que la plupart des navigateurs de les limiter à un signé de 32 bits (valeurs de -2147483648 à +2147483647) dans la pratique (64 serait un peu sur le dessus, et il ne fait pas de sens pour l'utiliser rien de moins que les 32 bits de ces jours)
log base 2 (lg) = lg(16777271)
16777216
.16777271
nécessitera donc de 25 bits.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 dépassement d'entier bug: si vous tapez
z-index: 2147483648
(qui est de 2 147 483 647 + 1) de l'élément va juste derrière tous les autres éléments. Au moins le navigateur ne plante pas.Et la leçon à en tirer est que vous devriez vous méfier de la saisie des valeurs trop importantes pour la
z-index
propriété, car ils enrouler autour de.La valeur minimale de Z-index est 0; la valeur maximale dépend de votre type de navigateur.
Cela dépend du navigateur (bien que la dernière version de tous les navigateurs devraient max à 2147483638), ainsi que le navigateur de réaction lorsque le maximum est dépassé.
http://www.puidokas.com/max-z-index/
De l'expérience, je pense que le bon maximum
z-index
est 2147483638.C'est la valeur maximale d'un entier codé sur 32 bits: 2147483647
Également voir les docs: https://www.w3.org/TR/CSS22/visuren.html#z-index
(Les valeurs négatives sont autorisées)
Z-Index ne fonctionne que pour les éléments qui ont
position: relative;
ouposition: absolute;
appliquée. 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à mis la pleine explication, mais la version rapide est que le minimum est de 0 car il ne peut pas être un nombre négatif et le maximum - eh bien, vous ne serez jamais vraiment besoin pour aller au-dessus de 10 pour la plupart des dessins.
Un utilisateur ci-dessus, dit "eh bien, vous ne serez jamais vraiment besoin pour aller au-dessus de 10 pour la plupart des dessins."
En fonction de votre projet, vous pouvez seulement besoin de z-index 0-1, ou z-index 0-10000. Vous aurez souvent besoin de jouer à la hausse des chiffres...surtout si vous travaillez avec lightbox téléspectateurs (9999 semble être la norme, et si vous voulez du haut de leur z-index, vous aurez besoin de dépasser ça!)
J'ai remarqué que, souvent, si le z-index ne fonctionne pas c'est parce que ses parents/frères et sœurs n'ont pas spécifié de z-index.
Donc si vous avez:
l'élément n ° 3, ou encore #4, peut-être contester #2 pour la souris/placez l'espace, bien que si vous définissez #1 de z-index 0, les frères et les sœurs qui le z-index de mettre en indépendant piles sont maintenant dans la même pile et z-index correctement.
Cela a un utile et assez humanisé description: http://foohack.com/2007/10/top-5-css-mistakes/
position: relative;
ou quelque chose comme ça.Tout
INT_MAX
est sans doute le pari le plus sûr, WebKit utilise apparemment doubles en interne et permet ainsi très grande nombres (jusqu'à une certaine précision).LLONG_MAX
par exemple fonctionne très bien (au moins en version 64 Bits de Chrome et de WebkitGTK), mais sera arrondi à 9223372036854776000.(Bien que vous devriez examiner attentivement si vous avez vraiment, vraiment besoin de ce nombre z indices...).
Un fait curieux, si vous utilisez un éditeur de texte comme Firebug et de mettre un grand nombre de
z-index
le navigateur va remplacer la plus grande valeur insérée par la valeur maximale