¿Valor mínimo y máximo del índice z?


518

Tengo un div en mi página HTML. Estoy mostrando este div basado en alguna condición, pero el div se muestra detrás del elemento HTML donde apunté el cursor del mouse.

He intentado todos los valores para el índice z de 0 a 999999. ¿Alguien puede decirme por qué sucede esto?

¿Hay algún valor mínimo o máximo de la propiedad 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>

Estoy mostrando y ocultando el div con .divClassonclick a través del <asp:hyperlink>uso de jQuery.


El problema probablemente no tiene que ver específicamente con el índice z. ¿Puedes dar algún ejemplo de HTML y CSS que ilustre el comportamiento? ¿En qué navegadores estás experimentando esto?
roryf

Solo por interés podría probar lo mismo sin usar la tabla, solo algo de contenido, el enlace y el div. También ponga un color de fondo en el div solo para estar seguro mientras desarrolla.
roborourke

6060
"intentado todo el valor para la propiedad Z-INDEX de 0 - 999999". Me parece difícil de creer.
sampathsris

44
@Krumia no lo sé, podría probar todos los valores del índice z entre 0-999999 con JS ... Solo una opción ...
FullyHumanProgrammer

44
¿Nadie mencionó realmente el display: noneen su CSS?
Mark Baijens

Respuestas:


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                       │
└──────────────────────┴───────────────────┴──────────────────────────────────┘

44
Creo que quiere decir negativo.
Gavin

42
¿Cómo llegaste a esto?
2540625

¿Algún número para móvil Safari / Chrome / Firefox?
2540625

30
Para los interesados 2,147,483,647 = 2^31 - 1,. Es una primicia de Mersenne.
Reggie Pinkham

2
@BehnamMohammadi, ¿cuál debería ser el comportamiento estándar?
Pacerier

307

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

'índice z'

Valor : auto | <integer> | heredar

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

Algunos tipos de valores pueden tener valores enteros (denotados por <integer>) o valores de números reales (denotados por <number>). Los números reales y los enteros se especifican solo en notación decimal. Un <integer> consiste en uno o más dígitos "0" a "9". Un <número> puede ser un <número entero> o puede ser cero o más dígitos seguidos de un punto (.) Seguido de uno o más dígitos. Tanto los números enteros como los números reales pueden estar precedidos por un "-" o "+" para indicar el signo. -0 es equivalente a 0 y no es un número negativo.

Tenga en cuenta que muchas propiedades que permiten un número entero o real como valor en realidad restringen el valor a algún rango, a menudo a un valor no negativo.

Básicamente, no hay limitaciones para el valor del índice z en el estándar CSS, pero supongo que la mayoría de los navegadores lo limitan a valores de 32 bits con signo (−2147483648 a +2147483647) en la práctica (64 estaría un poco fuera de la parte superior, y no tiene sentido usar nada menos de 32 bits en estos días)


17
Es importante tener en cuenta que el valor máximo del índice z en Safari 3 fue 16777271. Esto se elevó al estándar de 32 bits en Safari 4, por lo que solo es una preocupación si se dirige a navegadores más antiguos. Además, incluso en Safari 3, cualquier cosa por encima de 16777271 se limita a eso, así que a menos que esté utilizando valores de índice z absurdamente grandes para ordenar múltiples elementos, no debería tener un problema (es decir, establecer un elemento en un valor de índice z de 2147483647 garantizará que el elemento permanezca en la parte superior de cualquier navegador, a menos que compita con otro elemento que también tenga un índice z> 16777271).
Doktor J

66
@DoktorJ ¿Alguien sabe por qué es 16777271? Parece extraño que sea 56 más que el límite de un entero sin signo de 24 bits.
Jools

2
@Jools según el desarrollador de webkit Eric Seidel , ese fue el resultado de usar un campo de bits de 24 bitslog base 2 (lg) = lg(16777271)
Janosch

2
@Janosch Lo siento, no entiendo. lg (16777271) es mayor que 24. Pensé que un campo de bits de 24 bits no era lo suficientemente grande.
Jools

@Janosch, 2 ^ 24 = 16777216. 16777271por lo tanto requerirá 25 bits.
Pacerier

157

Mis pruebas muestran que ese z-index: 2147483647es el valor máximo, probado en FF 3.0.1 para OS X. Descubrí un error de desbordamiento de enteros: si escribe z-index: 2147483648(que es 2147483647 + 1) el elemento simplemente va detrás de todos los demás elementos. Al menos el navegador no se bloquea.

Y la lección que debe aprender es que debe tener cuidado de ingresar valores demasiado grandes para la z-indexpropiedad porque se ajustan.


57
Porque este (2147483647) es el mayor valor positivo de un entero con signo en un sistema operativo de 32 bits ...
Badr Hari

44
No creo que el número se ajuste si el valor es superior a 2147483647 ... Creo que es más probable que los navegadores solo traten cualquier número por encima de este valor como un valor constante, por ejemplo, 0.
oliver-clare

3
Tal vez su valor se vuelva negativo ... Por ejemplo -2147483647
Wahyu Fahmy

3
En los navegadores modernos, pasar 2147483648 no mueve los elementos detrás de otros elementos
Zach Saucier

25

El valor mínimo del índice Z es 0 ; El valor máximo depende del tipo de navegador.

ingrese la descripción de la imagen aquí


44
En realidad, el índice z puede ser un número negativo. Los elementos posicionados con índices z negativos se ordenan primero dentro de un contexto de apilamiento, por lo que aparecerán detrás de todos los demás elementos. También vea los documentos: w3.org/TR/CSS22/visuren.html#z-index
magikMaker

17
Fácil de copiar y pegar: 2147483647
candlejack

El índice Z puede ser un número negativo, pero para Ejemplo Safari para iOS 11.0.2 tiene un problema con esta propiedad.
kris_IV

Santosh, ¿de dónde sacaste estos números? ¿Copiaste la respuesta de Behnam y agregaste IE7 e IE8?
CPHPython

21

Depende del navegador (aunque la última versión de todos los navegadores debería alcanzar el máximo en 2147483638), al igual que la reacción del navegador cuando se excede el máximo.

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



21

Por experiencia, creo que el máximo correcto z-indexes 2147483638.


77
Parece que te equivocas. Según las pruebas realizadas en 2009 por Eric Poidokas, el valor máximo del índice z (sin riesgo de caída de elementos en el desbordamiento) es 2147483647.
Martin

14

Z-Index solo funciona para elementos que tienen position: relative;oposition: absolute; aplica. Si ese no es el problema, necesitaremos ver una página de ejemplo para ser más útil.

EDITAR: El buen médico ya ha dado la explicación más completa, pero la versión rápida es que el mínimo es 0 porque no puede ser un número negativo y el máximo, bueno, nunca necesitarás superar los 10 para la mayoría de los diseños.


55
He usado "z-index: -1;" antes de "hundir" un elemento para que no se pueda hacer clic en él. Probablemente no sea una solución popular, pero funciona. : P
Ty.

17
Sé que esto es un poco tarde, pero funciona con position: fixed también.
TCCV

77
AFAIK, puede tener enteros negativos para el valor del índice z.
d -_- b

Me pregunto por qué especifico el índice z: 1000, pero el navegador me dijo que el índice z real es automático. posición hace el truco.
Will Wu

6

He encontrado que a menudo si el índice z no funciona es porque sus padres / hermanos no tienen un índice z especificado.

Entonces si tienes:

<div id="1">
    <a id="2" style="z-index:2"></a>
    <div id="3" style="z-index:1"></div>
    <button id="4"></button>
</div>

el elemento n. ° 3, o incluso el n. ° 4, pueden estar compitiendo en el n. ° 2 por el espacio de clic / desplazamiento, aunque si configura el n. ° 1 en el índice z 0, los hermanos cuyo índice z los puso en pilas independientes ahora están en la misma pila y z-indexará correctamente.

Tiene una descripción útil y bastante humanizada: http://foohack.com/2007/10/top-5-css-mistakes/  


44
Mientras estamos en el tema, otro problema común es no tener position: relative;o algo así.
Ryan Taylor

1
En realidad, solo vuelve a leer la publicación original. Tienes razón, este es probablemente su problema.
Ryan Taylor

5

Un usuario de arriba dice "bueno, nunca necesitarás superar los 10 para la mayoría de los diseños".

Dependiendo de su proyecto, es posible que solo necesite índices z 0-1 o índices z 0-10000. A menudo necesitará jugar en los dígitos más altos ... especialmente si está trabajando con visores de lightbox (9999 parece ser el estándar y si desea superar su índice z, ¡deberá superar eso!)


0

Si bien INT_MAXes probablemente la apuesta más segura, WebKit aparentemente usa dobles internamente y, por lo tanto, permite números muy grandes (con cierta precisión). LLONG_MAXpor ejemplo, funciona bien (al menos en 64-Bit Chromium y WebkitGTK), pero se redondeará a 9223372036854776000.

(Aunque debe considerar cuidadosamente si realmente necesita tantos índices z ...).

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.