html - tricks - z-index position relative
Valor mínimo y máximo de Z-INDEX (12)
Depende del navegador (aunque la versión más reciente de todos los navegadores debería tener un máximo de 2147483638), al igual que la reacción del navegador cuando se excede el máximo.
Tengo un DIV en mi página HTML. Estoy mostrando este DIV basado en alguna condición. Pero DIV se muestra detrás de cualquier elemento HTML donde apunte el cursor del mouse.
He intentado todo el valor para la propiedad Z-INDEX desde 0 hasta 999999.
¿Puede alguien decirme por qué está pasando esto?
¿Hay algún valor mínimo o máximo de la propiedad Z-INDEX de CSS?
Por ejemplo, el siguiente HTML se define en un control ascx:
<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>
Y el CSS es:
.divClass
{
position: absolute;
left: 25px;
top: 25px;
width: 320px;
height: 300px;
z-index: 1000;
display: none;
}
Y estoy mostrando y ocultando un DIV específico para el hipervínculo utilizando + Jquery que está en la página principal.
El índice Z solo funciona para elementos que tienen position: relative; o position: absolute; Aplicado a ellos. Si ese no es el problema, necesitaremos ver una página de ejemplo para que sea más útil.
EDITAR: El buen doctor ya ha explicado 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 tendrá que superar los 10 para la mayoría de los diseños.
Es el valor máximo de un entero de 32 bits: 2147483647
También vea los documentos: w3.org/TR/CSS22/visuren.html#z-index (se permiten números negativos)
Fuera de experiencia, creo que el z-index máximo correcto es 2147483638.
He encontrado que a menudo si el índice z no funciona, porque sus padres / hermanos no tienen un índice z especificado.
Así que 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 artículo # 3, o incluso el # 4, puede estar disputando el # 2 por el espacio de clic / desplazamiento, aunque si establece el # 1 en el índice z 0, los hermanos que tienen el índice z los colocan en pilas independientes ahora están en la misma pila y será z-index correctamente.
Esto tiene una descripción útil y bastante humanizada: http://foohack.com/2007/10/top-5-css-mistakes/
Mis pruebas muestran que z-index: 2147483647 es 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 se va detrás de todos los demás elementos. Al menos el navegador no falla.
Y la lección que debe aprender es que debe tener cuidado de no ingresar valores demasiado grandes para la propiedad z-index porque se envuelven.
Si bien INT_MAX es 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_MAX por ejemplo, funciona bien (al menos en Chromium y WebkitGTK de 64 bits), pero se redondeará a 9223372036854776000.
(Aunque debería considerar detenidamente si realmente necesita tantos índices z ...).
Un dato curioso, si utiliza un editor como Firebug y coloca un número grande en z-index el navegador reemplazará el mayor valor insertado por el valor máximo
Un usuario de arriba dice "bueno, nunca necesitarás ir por encima de 10 para la mayoría de los diseños".
Dependiendo de su proyecto, es posible que solo necesite los índices z 0-1, o los índices z 0-10000. A menudo tendrás que jugar con los dígitos más altos ... especialmente si trabajas con visores de lightbox (9999 parece ser el estándar y si quieres superar su índice z, ¡deberás superar ese nivel!)
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 (indicados por <integer>) o valores de números reales (indicados por <number>). Los números reales y los enteros se especifican solo en notación decimal. Un <integer> consta de uno o más dígitos "0" a "9". Un <número> puede ser un <integer>, 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 reales pueden ir 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 un valor realmente 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 creo que la mayoría de los navegadores lo limitan a los valores firmados de 32 bits (−2147483648 a +2147483647) en la práctica (64 estaría un poco fuera de lugar, y no tiene sentido usar nada menos de 32 bits en estos días)
┌──────────────────────┬───────────────────┬──────────────────────────────────┐
│ 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 │
└──────────────────────┴───────────────────┴──────────────────────────────────┘